Full page background image with vertical scrolling

Question

I'm trying to create a page where the background image is responsive to your browser's screen size. However, I need content under that image such that if the person scrolls down, the background image ends.

It's hard to explain so I've tried to create an image to make it clearer:

Answer 1

Try this Fiddle:

HTML:

<div class='image'></div>
<div class='content'>Content</div>

Use absolute positioning to make the background image the same size as the screen, and put the content after, with a top of 100%:

body { 
    margin:0;
}
.image {
    position:absolute;
    width:100%; 
    height:100%; 
    background:green;
    background-image:url('some-image.jpg');
    background-size:cover;
}
.content {
    position:absolute; 
    width:100%; 
    top:100%; 
    height: 100px;
}