iOS moves background image when positioning fixed

Question

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 1

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

Answer 2

Julian's answer was very helpful to me.

It solved part of the problem, which was to prevent scrolling of the background image by replacing it with a static image in a fixed position div, avoiding Safari's faulty interpretation of "background-attachment: fixed".

But it left me with an image that I couldn't center within the viewport such that the center of the image was always on the center of the viewport.

This is normally background-position: 50% 50% and background-size: cover, but not when we don't have a background-image at all.

So I replaced Julian's inner <img> with a <div> having similar settings.

Then I added the background-image and properties to that div, EXCEPT FOR background-attachment which I left out.

This resulted in a div which took up the entire viewport and was fixed to the viewport, and which had a child div filling it completely, and that child div had a static background image set at position 50%/50% and size cover.

Works great!

My inner div styles are as follows:

#div_background > div
{
    top: 0px;
    left: 0px;
    width: auto;
    height: auto;
    right: 0px;
    bottom: 0px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    display: inline-block;

    background-image: url(/images/background.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

With the parent div styles as follows:

#div_background
{
    display: inline-block;
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    right: 0%;
    bottom: 0%;
    z-index: -1;
    background-color: #A0B4C8;
}

And the HTML is simply:

<div id="div_background"><div></div></div>

I consider this a hacky solution, but a necessary one due to Safari's bug.

A simple way of thinking of it is that rather than using background-attachment of fixed, we're creating our own fixed background and manually attaching a new div with the background image to that.

Thanks, Julian!