Erik Fischer Erik Fischer - 4 months ago 20
HTML Question

Full page background image with vertical scrolling

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:

http://i.imgur.com/Z1mSMVi.png

Please help!

Answer

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