title: CSS Background 100% Height Problem
body: <p>Live example of background issue: <a href="http://webid3.feckcorp.com/" rel="nofollow">http://webid3.feckcorp.com/</a></p>
  
  <p>As you can see the gray stripped background image flows over the bottom of the footer and leaves about 115 extra pixels below the footer. The div that contains the background image is <code>&lt;div id="home_page_back"&gt;</code> and is contained within the body element, both of which are set at a height of 100%.</p>
  
  <p>I want the background image to hit the footer and then stop … not go any further past it. Can someone please advise? </p>
  
  <p>Also - I <em>do not</em> want to place the image as a background of the body.</p>
  
  <p>Cheers!</p>
  
  <p><strong>Copy of the CSS:</strong></p>
  
  <pre><code>body {
      margin: 0px;
      padding: 0px;
      height:100%;
      background-color: #f3f3f3;
  
      font-family: Arial;
      font-size: 12px;
      color: #333333;
  }
  
  #home_page_back {
      background:#9C9D9B url(http://templatemints.com/rttheme13/images/background_images/abstract_background7.jpg) top center no-repeat !important;
      display: block;
      width: 100%;
      height: 100%;
      z-index: -1;
      position: absolute;
  }
  </code></pre>