title: BODY background image gets cut off on browser viewport
body: <p><strong>SOLVED</strong><br>
  I used the solution proposed by Roman below, based on adding an additional <strong>DIV</strong> with <strong>position:absolute</strong>, I tested it in IE7, IE8, IE9, Chrome and Firefox and seems to work fine!</p>
  
  <p>So the layout now has 3 full background images (what I needed), and even you can use the <strong>BODY</strong> bg taking care of that will be cutted off to the browser's viewport height (still could be useful in some cases), <strong>"three and and a half" bg images with "sticky footer" :)</strong></p>
  
  <p>The only drawback I found its that the links in the #footerContent were not "clickable", I solved it using <strong>position:relative</strong> to this container.</p>
  
  <p>I made the changes to the sample I provided and uploaded it to my Dropbox, In the case that someone else could find it usefull.
  Thank you all for your answers.
  <a href="http://dl.dropbox.com/u/512412/html_stackoverflow_solution.rar" rel="nofollow">http://dl.dropbox.com/u/512412/html_stackoverflow_solution.rar</a></p>
  
  <hr>
  
  <p>I uploaded</p>
  
  <p>I'm building a quite complex layout for a website where I need to have 3 background images covering the background of the web page. So I have one in the <strong>HTML</strong> style, one in the <strong>BODY</strong> style, and the final one in a <strong>DIV</strong> that it's the container for all the webpage elements (<strong>#contenedor</strong>)</p>
  
  <p>I'm also sing a <strong>"Sticky footer" technique</strong>, to have the footer "glued" to the bottom of the page whern there are small contents in the "main content" area.</p>
  
  <p>The problem that I have It's that the <strong>BODY</strong> bg image gets cut off to the viewport of the web browser, I mean, <strong>It doesn't repeat-y below the visible area displayed when the page is loaded</strong>, and the contents are "tall" enough to make the webpage scroll.</p>
  
  <p>What I tried until now:</p>
  
  <ol>
  <li><p>To add an additional container <strong>DIV</strong> surrounding all (that's ok for me), but doing that It brokes the "Sticky footer" (maybe I did not found the right way to do it... I don't know).</p></li>
  <li><p>Force the <strong>BODY</strong> to be as tall as the <strong>HTML</strong> using:</p>
  
  <pre><code>html&gt;body {  
  min-height:100%;  
  height:auto;  
  height:100%; }
  </code></pre></li>
  </ol>
  
  <p>This solves the BODY issue, the image repeats but this also breaks the "Sticky footer"... :(</p>
  
  <p>You can see a sample:<br>
  Index with "small contents" all OK... footer on bottom, etc.<br>
  <a href="http://carloscabo.com/bg/index.htm" rel="nofollow">http://carloscabo.com/bg/index.htm</a></p>
  
  <p>Index page with tall contents (simple <strong>BRs</strong>), scroll down to see the cut on the BODY bg Image<br>
  <a href="http://carloscabo.com/bg/index_tall.htm" rel="nofollow">http://carloscabo.com/bg/index_tall.htm</a></p>
  
  <p>You can also download all the files of this sample in the following URL to do your own local test.<br>
  <a href="http://carloscabo.com/bg/stackoverflow_html.zip" rel="nofollow">http://carloscabo.com/bg/stackoverflow_html.zip</a></p>