Fixed Background for Part of a Site (Div) in iOS

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

iOS moves background image when positioning fixed

I found a quite suboptimal solution, but at least it works. I don't use background-image in CSS anymore but put a img tag inside the background div and position it absolute:

#background img {
    top:0;
    left:0;
    right:0;
    bottom:0;
    position:absolute;
}

Here is the fiddle

Unfortunately, the paragraph "this is text" is not vidible anymore. Lucky, thats it's just for background...

Also the image is not centered anymore, nor resized correctly :[

Edit

I added the following CSS to fix the positioning:

#background img {
    margin-left:auto;
    margin-right:auto;
}

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