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:

This might help http://stackoverflow.com/questions/3437786/how-to-get-web-page-size-browser-window-size-screen-size-in-a-cross-browser-wa — bjan, Aug 05 '13 at 04:39
I've tried making the responsive background image with no avail. I wasn't able to figure it out. — Erik Fischer, Aug 05 '13 at 04:40
http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/ https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag — bjan, Aug 05 '13 at 04:43

score 18 · Accepted Answer · edited Jul 11 '16 at 17:56

18

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

edited Jul 11 '16 at 17:56

DᴀʀᴛʜVᴀᴅᴇʀ

7,681
17
73
127

answered Aug 05 '13 at 04:45

tb11

3,056
21
29

Any way to make the 'content' class outside of the 'image' class? – Erik Fischer Aug 05 '13 at 05:04
you can simply make two different div. first
and then
Content
. Same css would work for you. – Ashis Kumar Aug 05 '13 at 05:06
This is overkill. There is no need for `position:absolute` on anything. See my answer – Zach Saucier Jul 11 '16 at 17:50

score 4 · Answer 2 · answered Jul 11 '16 at 17:48

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

Full page background image with vertical scrolling

2 Answers2

Linked