how to make div bg image fit full screen and allow scrolling for content underneath

Question

I've researched this topic for the past 2 days straight, tried 250+ variations of code, and am at my wits end, which is why I'm now here... I feel like I'm very close to a solution so hopefully someone here can put it over the edge...I'm fairly new to CSS so if I'm way off base here I apologize...

I am trying to achieve an effect that you can view on stumbleupon.com's homepage. When the page is loaded, the bg image perfectly fits into the viewable area of the browser regardless of resolution. The bg image is not fixed and you can therefore scroll down to view more content. You can see the exact same effect on http://www.bakkenbaeck.no/ ...again original image fits perfectly, and is not fixed with content below.

I thought I finally found my answer when I came across the StackOverflow question and answer here Making a div fit the initial screen

I followed instructions there and came oh-so-close...but no cigar.

You can view my test domain I've set this up on at www.konnect.co

The code I entered for this bg image is

#wrapper-8 { 
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;

background: url(http://bakkenbaeck.no/content/01-work/01-easybring/01.jpg)
no-repeat     center; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
 background-size: cover;
}

This displays the image perfectly in 2 browsers that I've checked. However, the bg image is completely overlapping the content of the 2nd div on the page. I created a 2nd div, gave it a bg color and added a bit of content to test, and it's invisible hiding behind the bg image from the div above it. If you resize the browser to a smaller size it will then allow you to start to scroll as the bg image gets small. Am I missing something with the bg image div height here? I've tried several height options but can't get anything to change. Any help would be greatly appreciated.

score 10 · Answer 1 · answered Dec 18 '14 at 02:17

10

Here is Your solution:

Use absolute positioning to both class and put the content after it with top: 100%!

    .image {

      position: absolute;

      width: 100%;

      height: 100%;

      background-image: url(images/bg.jpg);

      background-size: cover;

      background-color: purple;

    }

    .content {

      position: absolute;

      top: 100%;

      width: 100%;

      height: 200px;

      background: yellow;

    }

<div class='image'></div>
<div class='content'>Here is Your solution!!! :-)</div>

answered Dec 18 '14 at 02:17

Eteroxee

101
1
3

This would be a great solution, but there's a horizontal scroll bar. Reproducible in Chrome. – lux Jan 15 '16 at 01:47
is there no solution for the horizontal scroll bar? – tisaconundrum Jan 14 '17 at 17:11

Daniel · Answer 2 · 2013-10-02T06:51:57.507

3

I'm trying to achieve the same thing as you do (at least I think so). Would something like this work for you?

http://jsfiddle.net/tKNzR/

html, 
body {
   height:100%;
}

#header-div {
   height:100%;
   width:100%;
   position:relative;
   top:0;
   left:0;
}

To make an image in #header-div always fill the screen you could make use of a jquery plugin called backtstretch.

edited Oct 02 '13 at 06:51

answered Oct 01 '13 at 09:47

Daniel

93
7

score 2 · Answer 3 · answered Nov 26 '16 at 08:01

It seems pretty simple and worked for me.

I looked at http://www.stumbleupon.com/ and using the chrome's developer mode got the trick they used to do it. The first div inside body has the class homepage which uses the following properties

.homepage {
    min-height: 720px;
    position: relative;
    height: 100%;
    background: url(https://nb9-stumbleupon.netdna-ssl.com/zuZ2r1FsBTumc2VqMc6CtA) center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    color: #fff;
}

The catch here is background-attachment: fixed;. This will ensure that the image doesn't scroll along with the content.

You can find detailed information on it here:

http://www.w3schools.com/cssref/pr_background-attachment.asp

score 1 · Answer 4 · edited Dec 03 '13 at 13:15

1

Try this :

body {
    background-image:url('name.jpg');
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:100% 100%;
    //min-height:100%;
    //min-width:100%;
    background-size:cover;
}

edited Dec 03 '13 at 13:15

Pranav 웃

8,469
6
38
48

answered Dec 03 '13 at 12:57

ashwin

11
1

score 1 · Answer 5 · answered Jan 03 '14 at 19:38

You need this property:

display:table;

CSS

#wrapper-8 { 
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;

background: url(http://bakkenbaeck.no/content/01-work/01-easybring/01.jpg)
no-repeat     center; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
 background-size: cover;

 display:table;/*Added this*/
}

score 0 · Answer 6 · answered May 17 '13 at 04:56

0

If you put into css for the #wrapper-8:

position:absolute; z-index: -1;

then the content will be visible

answered May 17 '13 at 04:56

Tom

71
7

that seemed to bring the 2nd div's content directly overlapping the bg image from div 1...I want the 2nd div to sit below the bg image from div 1 so that you have to scroll down to see the content... this change is hiding the bg image... I'll leave the changes on www.konnect.co so you can see... – Chris May 17 '13 at 05:34
do I perhaps need to make a change to the 2nd div CSS to position it somehow? I just donw understand why the 1st div's bg image was overlapping the 2nd div. – Chris May 17 '13 at 05:39

score 0 · Answer 7 · answered May 17 '13 at 06:44

0

Got solution remove position:absolute for the first div and in #wrapper-8 give min-height as per your need.

answered May 17 '13 at 06:44

somesh

589
1
5
11

wrapper-8 is the first div...remove it from there? – Chris May 17 '13 at 16:14
that seemed to put the 2nd div below the first one (vertically) like I wanted however the first div with the image has no height... again please feel free to view on konnect.co to see what I'm talking about... – Chris May 17 '13 at 16:22
remove position absolute for #wrapper-8 and give min-height to #wrapper-8 as of now it is having min-height:0px; give this height according to your requierment (and sorry for late reply) – somesh May 27 '13 at 08:44

ssomnoremac · Answer 8 · 2014-08-21T20:52:52.227

html,body,section{ 
  height:100%;
}
.frame1{               /* <section class='frame1'> */
  position: absolute;  /* mama told me never to use this but all my friends do */
  top: 0; right: 0; bottom: 0; left: 0;  /* section shows on load (top:0)*/
  background: url(shot1.jpg) no-repeat center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.frame2{               /* <section class='frame2'> */
  position: absolute;  /* mama told me never to use this but all my friends do */
  top: 100%; right: 0; bottom: 0; left: 0;  /* section scrolled to (top:100%) */
  background: url(shot2.jpg) no-repeat center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

how to make div bg image fit full screen and allow scrolling for content underneath

8 Answers8

CSS