iOS moves background image when positioning fixed - html

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!