title: how to make div bg image fit full screen and allow scrolling for content underneath
body: <p>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...</p>
  
  <p>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 <a href="http://www.bakkenbaeck.no/" rel="nofollow noreferrer">http://www.bakkenbaeck.no/</a> ...again original image fits perfectly, and is not fixed with content below.</p>
  
  <p>I thought I finally found my answer when I came across the StackOverflow question and answer here <a href="https://stackoverflow.com/questions/6286128/making-a-div-fit-the-initial-screen?answertab=votes#tab-top">Making a div fit the initial screen</a></p>
  
  <p>I followed instructions there and came oh-so-close...but no cigar.</p>
  
  <p>You can view my test domain I've set this up on at www.konnect.co</p>
  
  <p>The code I entered for this bg image is </p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p>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.</p>