Dynamic resizing image overlapping below divs - html

Question

I currently have a dynamic header image that resizes to the size of the browser. (exactly like this: http://www.theadventurists.com/ ) But currently it overlaps my other content. What I actually want is the image to take up the screen and scroll down to see the content.
The website I linked, how do they do this without overlapping content? Is there JS involved? The closest I have gotten to replicating it is having the div below have margin-top 100%. But that is a bad fix due to the margin becoming too large when the browser is certain sizes.
<div id="test_bg">
</div>
<div id="page">
<p>This is the content</p>
</div>
#test_bg{
background-color:blue;
position:absolute;
background-size: cover;
background-repeat: no-repeat;
top: 0;
left: 0;
bottom:0;
right:0;
}
#page{
background-color:red;
margin-top:100%;
}
http://jsfiddle.net/9Trb2/9/ blue being the image, red being content.

Answer 1

You're right on with setting margin-top 100% as not the best way to go about it. There were a couple of issues with your JSFiddle - the background URL was pointing to an imgur page and not the actual JPG, so I changed that. Also, you had the css selector page which instead needed to be #page to correctly target the div.
My approach for solving your issue was to change the #test_bg height to 100% and remove absolute positioning. By taking away absolute positioning, #test_bg becomes part of the document flow and the next div will automatically be positioned right below it, which is what you wanted. The other thing you need to do in order to be able to set that div to 100% height is to also set the body and html height to 100% - otherwise you'd see that setting #test_bg to height=100% wouldn't do anything. Here's the JSFiddle.
#test_bg{
background-image:url(http://i.imgur.com/GgfpgA3.jpg);
background-size: cover;
background-repeat: no-repeat;
height: 100%;
}
html,body{
height: 100%;
}
#page{
height:400px;
width:400px;
background-color:red;
}