title: How to force HTML background to bottom when page is smaller than window
body: <p>I have a page with 2 background images, one of them needs to show at the very bottom of the page. Currently I've implemented it like this:</p>
  
  <pre><code>body {
      background-image: url('/cheri/image/background.png'), 
                        url('/cheri/image/backgroundB.png');
      background-position: top, bottom;
      background-repeat: repeat-x, repeat-x;
  }
  </code></pre>
  
  <p>This works fine when page content is higher than the browser window, but if it's smaller an empty white space is left below the background image, like in this picture:</p>
  
  <p><a href="http://img198.imageshack.us/img198/4560/screenshot20120916at851.png" rel="nofollow">http://img198.imageshack.us/img198/4560/screenshot20120916at851.png</a></p>
  
  <p>I have tried to set the body as position:absolute, height:100%, but it did not render correctly when scrolling was present. I have also attempted to create a separate div for the background image and absolutely position it to the bottom, but since I have different position properties for some elements that occur at the bottom, the z-indexing didn't work properly.</p>
  
  <p>Thanks for any help!</p>