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>

Have you tried this http://stackoverflow.com/questions/23236158/how-to-replicate-background-attachment-fixed-on-ios — Shashi, Jan 03 '17 at 06:03
After some debate, I ended up just using position: scroll for the mobile css. Thanks for the information. — Jordan U., Jan 03 '17 at 11:56
I think this answers your question: http://stackoverflow.com/questions/24154666/background-image-size-cover-not-working-on-ios/43058483#43058483 — Viktor Tabori, Apr 25 '17 at 00:45
Possible duplicate of [Fixed background image with ios7](http://stackoverflow.com/questions/20443574/fixed-background-image-with-ios7) — Dmitry Shvedov, May 10 '17 at 15:02

score 5 · Answer 1 · answered Jul 18 '17 at 06:42

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!

Solution didn't work for me. Also be aware that this solution will potentially create problems with other scrolling effects — Stirling, Mar 08 '21 at 14:54

score 0 · Answer 2 · answered Sep 20 '22 at 00:34

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.

score -2 · Answer 3 · answered Oct 12 '17 at 00:41

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');
}
});

Background-Attachment: Fixed Doesn't Work On iOS

3 Answers3

Linked