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

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