Search code examples
htmlioscsscss-positionfixed

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...


Solution

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