title: CSS Div Background Image Fixed Height 100% Width
body: <p>I'm trying to setup a series of div's with a background image that each have their own fixed height, and stretch to fill up the width, even if there is overflow on the top/bottom that is clipped.  I just don't want the white space on the edges.</p>
  
  <p>Currently, I have: <a href="http://jsfiddle.net/ndKWN/">http://jsfiddle.net/ndKWN/</a></p>
  
  <p>CSS</p>
  
  <pre><code>    #main-container {
          float:left;
          width:100%;
          margin:0;
          padding:0;
          text-align: center;
      }
  
      .chapter{
          position: relative;
          height: 1400px;
          z-index: 1;
      }
  
      #chapter1{
      background: url(http://omset.files.wordpress.com/2010/06/homer-simpson-1-264a0.jpg) 50% 0 no-repeat fixed;
          height:1200px;
      }
  
      #chapter2{
      background: url(http://download.ultradownloads.com.br/wallpaper/94781_Papel-de-Parede-Homer-Simpson--94781_1680x1050.jpg) 50% 0 no-repeat fixed;
          height:1200px;
      }
  </code></pre>