Question

I’m developing an Asp.Net MVC site with jQuery Mobile.
I’ve this CSS part to set the background image to be fixed in the center of the site while scrolling:

background: white url(Image/A-HD.jpg);
background-repeat: no-repeat;
background-position: 50% 50%; /*or center center */
background-attachment: fixed;
background-size: 50%;

It works everywhere, except for the iPad 2 (the only one I tested). Seems like background-attachment: fixed; doesn’t work properly: the background image actually stays in the center, but doesn’t follow my scroll.

So, is there a way to simulate background-attachment: fixed; for iPad2 (and similar, I suppose)?

Thanks!

Answer 1

You can potentially get around this using a separate element and position: fixed which does work!

HTML:

<div id="Background"></div>

<div id="Content"></div>

CSS:

#Background {
    background: white url(Image/A-HD.jpg) no-repeat 50% 50%;
    background-size: 50%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}