CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Erik Fischer
Erik Fischer

Reputation: 1481

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

Upvotes: 13

Views: 33371

Answers (2)

tb11
tb11

Reputation: 3106

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

Upvotes: 18

Zach Saucier
Zach Saucier

Reputation: 25974

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

Upvotes: 4

Related Questions