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?

Solution 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

Solution 2

That website uses a trick in mobile browsers, taking advantage of the fact that while background-attachment: fixed doesn't work, position: fixed does, so in mobile browsers it just creates a <div> that remains fixed behind the scrolling content.

Comments

[JeremyE]

Sorry, I should have included the full code. I edited the original post to include the full code.

[Breezer]

@JeremyE Could u send me a link to your site, cause I made a demo and it works perfectly fine for me.

[JeremyE]

added a demo link to the original post. It works fine in regular browsers, but on an iPad the background scrolls.

[Breezer]

@JeremyE Added a working example that works on both my iphone and ipad

[JeremyE]

PERFECT. Works like a charm. Thanks a ton.

[Ben Sewards]

I have tried this on iOS mobile and did not get great results with a fixed background image in regards to the image not scaling (even with background: cover). Any solutions for this?

[Ben Sewards]

Sorry, I worded that wrong. I have tried that solution, and although I got it working, I then had issues with scrollTop. I then found backstretch jQuery plugin that worked. Thanks for the insight as this was the closest solution I could find.

[z00l]

Here's a link to a fiddle with an existing background image, the one from the answer was removed: fiddle.jshell.net/uZRXH/140 And also the one to view on the ipad: fiddle.jshell.net/uZRXH/140/show