Background-Attachment: Fixed Doesn't Work On iOS

Question

I'm trying to find a solution to the problem I'm having with fixed backgrounds on iOS devices. I would rather not have to redesign everything for this website, and I'm hoping that some CSS changes can fix it. This is what the site looks like on iPhones, and this is what it should look like. The CSS code I'm using is as follows:

.container {
    min-width: 320px;
    max-width: 480px;
    margin: 0 auto;
}

.fixed-background {
    height: 800px;
    -webkit-backgound-size: cover;
    -o-backgound-size: cover;
    -moz-backgound-size: cover;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    text-align: center;
    overflow: auto;
}

I've also tried using a @media query to fix it for iOS using some posts on stackoverflow, but this didn't seem to have any effect:

@media screen and (min-color-index:0) and (-webkit-min-device-pixel-ratio:0) {
    .fixed-background {
        background-attachment: scroll;
    }
} 

HTML

<div class="fixed-background bg-1">
    <div class="container">
        <div class="title">
            <h1>ROOK PROPERTY<br>MANAGEMENT INC.</h1>
            <h2>CONDOMINIUM MANAGEMENT</h2>
        </div>
    </div>
</div>

Answer 1

I just went through the same issue, and this is how I solved it.

First, you need to declare your body and html to be 100% wide and 100% tall:

html, body{
 width: 100%;
 height: 100%;
}

Then, the scrolling on your page can NOT be done by the body: you must wrap it on a container. This container needs three parameters: overflow:scroll, width: 100% and height: 100%. I recommend wrapping the entire site in it:

#wrapper{
  width: 100%;
  height: 100%;
  overflow: scroll;
 }

If you don't like how it scrolls, you can also try adding -webkit-overflow-scrolling: touch.

Hope that helps you/whoever comes looking for this!

Answer 2

To all my div with fixed background I add the classes class="parallax iparaxify paraxify" And in my main css file I have:

.parallax {
width: 100%;
background url(../images/bg.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
} 

And finally make it parallax for everything except i products

.paraxify {
  background-attachment: fixed;
  background-position: center center;
  background-size: cover;
}

At the end deactivate position:fixed for ipad, iphone and ipod with jquery

// adds mobile class, and mobile os to html tag
jQuery(document).ready(function($){
var deviceAgent = navigator.userAgent.toLowerCase();

if (deviceAgent.match(/(iphone|ipod|ipad)/)) {
$('.iparaxify').removeClass('paraxify');
}
});

Answer 3

I am not sure if this will help I found a general solution for Background Position Fixed on iOS.

And it works really well with recent iPads.

Feel free to copy!

Just beneath the body tag add a

<div id="iPad"></div>

Then style that as:

div#iPad { 
    position: sticky; 
    background: <your image + settings>; 
    top: 0; 
    margin: 0; 
    height: 100vh; 
    margin-top: -100vh; 
    z-index: -1 }

I put it on all pages of my site. But you can see it in action on this really long music page.

It works!!

Took me a while to come up with this.

Note you can only see this on iOS tablet. I didn't implement it for mobiles. But possible the code would work just as well.