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 do

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

Answer 2

There is no need for position: absolute as tb11 suggests.

You can simply set the height of the viewport using viewport units or by setting the height for the html, body, and image elements.

Using vh - Demo and support chart:

body { margin: 0; }
.image {
    width:100vw;
    height: 100vh; 
    background: green;
    background-image: url('some-image.jpg');
    background-size: cover;
}

---

If you can't use vh, you'll have to set the height of the html and body elements as well so that you can use percents - Demo:

html, body, .image { height: 100%; }
body { margin: 0; }
.image {
    width:100%;
    background: green;
    background-image: url('some-image.jpg');
    background-size: cover;
}