Fixed Body Background Scrolls with The Page on iOS7

Fixed Position Background on iOS

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

How to replicate background-attachment fixed on iOS

It has been asked in the past, apparently it costs a lot to mobile browsers, so it's been disabled.

Check this comment by @PaulIrish:

Fixed-backgrounds have huge repaint cost and decimate scrolling performance, which is, I believe, why it was disabled.

you can see workarounds to this in this posts:

Fixed background image with ios7

Fixed body background scrolls with the page on iOS7

White area on fixed background when scrolling on ios

I feel your pain. If you look carefully at the example you found where there was no white space problem (http://www.heartkids.co.nz) - the answer was there, but hard to find unless you know what you are looking for.

You'll see they applied a 2d transform on the background image. In most cases applying either a 2d or a 3d transform on fixed divs with background images gets rid of unwanted white space like this.

This CSS should remove that annoying white bar. Cheers.

.background-img {
   transform: translate3d(0,0,0);  
} 

---

Related Topics