adding "position: fixed;" prevents all scrolling, even on unattached elements - html

Question

So, should be fairly straightfoward but i don't know why this isn't working (maybe i'm tired).
I'm trying to add position fixed to my webpage so i get a nice background that doesn't move, and then over the top, a text space where you can scroll (so the text moves, but the image stays the same). But when i add "position: fixed;" it just stops scrolling all together and as far as i'm aware, it should only stop the scrolling of the part it's attached to.
So here's my html
<div id="Home-background">
<div id="Home">
<a name="Home"></a>
<div class="page-padding"></div>
</div>
</div>
and my css
#Home-background {
**position: fixed;**
z-index: 1;
top: 20px;
width: 100%;
background: url('Pictures/lords-fallen-art-wallpapers-1080p.jpg');
background-size: 100%, 100%;
padding-top: 0px;
min-height: 700px;
}
#Home {
position: relative;
z-index: 10;
top: 400px;
width:70%;
min-height: 3000px;
background:#ffffff;
padding-top: 50px;
padding-bottom: 100px;
}
The marked position is what is causing the issue, but it should have no affect on the #Home set, right?
EDIT: I thought i should note, i am using other fixed elements ( i have a top bar and a menu bar at the side currently, both are fixed and both scroll till i add the fixed element as mentioned above. But having multiple fixed elements shouldn't stop other fixed elements from working either, right? (yes i've z-indexed them respectively)

Answer 1

#Home-background is wrapping the #Home div and will prevent scrolling if it is position: fixed
To place a fixed background, put a background on the body.
In your example it should look something like this:
no-repeat prevents the background image from repeating
background-position: fixed prevents the image from scrolling
background-size: 100% 100% stretches the image to fit the body element
Note: The image in this example does not make it obvious that it is fixed, but it is :)
body {
margin: 0;
background: url('http://www.placehold.it/1000') no-repeat;
background-size: 100% 100%;
background-position: fixed;
}
#Home {
position: relative;
width: 70%;
min-height: 3000px;
background: #ffffff;
padding-top: 50px;
padding-bottom: 100px;
}
<div id="Home">
<a name="Home"></a>
</div>

Answer 2

I managed to fix it, the problem was "Home" being inside "Home-Background" although i still don't understand why that would break it.
The following solves my problem
<div id="Home-background"></div>
<div id="Home">
<a name="Home"></a>
<div class="page-padding"></div>
</div>