title: Footer background image css
body: <p>Good Day,
  I am having this problem about my footer image not stretching when I resize my browser.
  I tried using sticky footer but I don't think it works.</p>
  
  <p>I am using 960 grid for my layout so I had to create a different div to wrap my footer background so it runs across the browser...</p>
  
  <p>For some reason, there is this white space at the bottom of my background image (in the footer section) when I stretch the browser.</p>
  
  <p>My xhtml goes something like this.. Please feel free to preview my site here: <a href="http://www.ofsgraphics.com/ofsv3" rel="nofollow">http://www.ofsgraphics.com/ofsv3</a></p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="container"&gt;
          &lt;div id="contentMainBackground"&gt;&lt;/div&gt; &lt;!-- background image for content */
               &lt;div id="contentMain" class="container_12"&gt;&lt;/div&gt;
  
      &lt;/div&gt;&lt;!-- end of container --&gt;         
  
      &lt;div id="footerMainBackground"&gt;&lt;/div&gt;&lt;!-- background image for footerMainBackground --&gt;
           &lt;div id="footer" class="container_12"&gt;&lt;/div&gt;
  
  
  CSS:
      #footerMainBackground {
          background:url("../images/footer_bg.jpg") repeat;
          min-height:150px;
          width:100%;
          position:fixed;
          overflow:hidden;
          clear:both;
      }
          #footer {
          padding:30px 0 0 0;
          }
  </code></pre>
  
  <p>I would really appreciate your help.</p>
  
  <p>Thank you.</p>