Julian F. Weinert Julian F. Weinert - 2 months ago 14
CSS Question

iOS moves background image when positioning fixed

I wanted my background image to stay at the same position. So I made use of

background-attachment:fixed;


When I discovered that iOS does apparently not support this property, I decided to put a fixed background div into the DOM. This actually works pretty well:

#background {
top:0;
left:0;
width:100%;
height:100%;
position:fixed;
background-position:50% 0%;
background-repeat:no-repeat;
background-attachment:fixed;
background-image:url("images/mark-bg.png");
}


At the first look, this works great in iOS too. But then I recognized, that Safari scrolls the DIV up, to where it would have got scrolled, if it wouldn't be fixed.

Now I ask myself »What the hell...?!« I mean... Why does iOS scroll an element that is explicitly told to not do so?

Is there any intelligent solution?

Here is a complete Demo

EDIT

I just found out, that not the element moves itself, but the background image moves...

Answer

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;
}
Comments