title: HTML CSS height 100% only goes as tall as the screen resolution, not the body height
body: <p>I can't figure out how to make my seasonal overlay div the full height of the html. Right now its the height of the screen, but scrolling down cuts off part of the image. Does anyone know the right way to make the sesasonal overlay div extend the whole height of the html? The div is part of a server side include so I can't close the underlay div after my content. Also, half my closed online sales don't use javascript, so it needs to be an html/css solution please.</p>
  
  <p>You can save time from reading below by just seeing my <a href="http://jsfiddle.net/e8Bck/1/" rel="nofollow">JSFIDDLE</a>.</p>
  
  <p>Thanks.</p>
  
  <p>CSS:</p>
  
  <pre><code>html{
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C5CEFF', endColorstr='#F8D0FD',GradientType=0 );
      background: -webkit-gradient(linear, left top, left bottom, from(#C5CEFF), to(#F8D0FD)) fixed;
      background: -moz-linear-gradient(top, #C5CEFF, #F8D0FD);
      margin:0px;
      padding:0px;
      min-height:100%;
  }
  
  body{
      margin:0px;
      padding:0px;
      overflow-x: hidden;
      min-height:100%;
      display:block;
  }
  
  .background-overlay-season
  {
      position:absolute;
      left:0px;
      top:0px;
      z-index:-1;
      width:100%;
      background-image:url(http://sonosmile.com/images/fall.png);
      margin:0px;
      padding:0px;
      overflow-x: hidden;
      min-height:100%;
      display:block;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
  &lt;div class="background-overlay-season"&gt;&lt;/div&gt;
  a bunch of content....
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>