Aleksandar Krstic

Personal Blog

CSS – How to fix the issue with fixed background on scroll in iOS

Your client want to have a fixed background when user scroll down? First thought – piece of cake, and really it is if you disregard the fact that users with iPhone or iPad like to scroll also.

This piece of code will work for every device except ones that have iOS (iPhone, iPad)

body {
    background-image: url("PATH-TO-YOUR-IMAGE");
    overflow-x: hidden;
    background-attachment: fixed;
    position: relative;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    width: 100%;
    height: 100%;
}

Why is that the case here? Per my understanding, Apple disabled position: fixed or background-attachment: fixed style for body element.

So what to do?

1. Open and close div inside of body element

<body>
<div class="ios-fixed-bg"></div>
....
</body>

2. Apply the following style to class ios-fixed-bg

.ios-fixed-bg {
	background-image: url("PATH-TO-YOUR-IMAGE");
	height: 100%;
	width: 100%;
	position: fixed;
	background-position: center;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
	z-index: -1;
}