html - Fixed Position Background on iOS

Question

I have a website that has a full-image fixed background that the content "floats" above. It works fine in desktop browsers, but the fixed background ends up scrolling on iPads and other tablets. This seems to be a common issue, but then I ran across this website, which seems to have a fixed background even on iPad's.

http://confitdemo.wordpress.com/

Any clue how they are pulling that off? I tried:

#content-wrapper.posts-page {
background-attachment: fixed !important;
background-clip: border-box;
background-color: transparent;
background-image: url("image path");
background-origin: padding-box;
background-position: right top;
background-repeat: no-repeat;
background-size: cover;
}

(This was copied from Firebug, which is why it's not shorthand).

But had no luck. Anyone get me pointed in the right direction?

Answer 1

I think the problem lies in that your table most likely resizes the background, so if you add this declarations, in most likely hood it should get it running just fine.

background-attachment: fixed !important;
background-size: cover !important;

Edit:

If this doesnt work only other reason i can think of is that ios must somehow resize the body size to be as big as the content, what you have to do then is create a div inside the body tag with correct properties

#fixebg{
background: url(image.jpg) top;
height:100%;
width:100%;
position:fixed;
}

Here is a similiar solution:

How can I set fixed position Background image in jquery mobile for iPhone app using Phonegap

Edit - 2:

Added a fiddle you can check:

http://jsfiddle.net/uZRXH/3/

And here is link to try it out on your ipad:

http://fiddle.jshell.net/uZRXH/3/show