title: css - float header and footer above content, auto resize background with jquery
body: <p>I'm trying to reproduce a layout similar to <a href="http://en.bulgari.com/department.jsp?cat=cat00002" rel="nofollow">bulgari.com</a> as far as the header, footer and auto resizing the background image goes (i know bulgari.com has a flass movie as a background but I need to use an image that auto resizes to the content div).
  I'm not very good a decoding css and jquery so if anyone could spare a few minutes, I'd like to know how I can float the header and footer above the content div and also resize the content background image on document load and window resize events.</p>
  
  <p>I've done this so far but it's pretty basic.</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7"&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;link href="css/default.css" rel="stylesheet" type="text/css"&gt;
  &lt;link href="css/layout.css" rel="stylesheet" type="text/css"&gt;
  &lt;script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  $(document).ready(function() {
      var divheight = $(document).height() - $(".header").height() - $(".footer").height();
      $(".main-container").height(divheight);
  });
  
  // for the window resize
  $(window).resize(function() {
      var divheight = $(document).height() - $(".header").height() - $(".footer").height();
      $(".main-container").height(divheight);
  });
  
  //--&gt;
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body class="bg"&gt;
  &lt;div class="header"&gt;&lt;/div&gt; &lt;!-- header end --&gt;
  
  &lt;div class="main-container"&gt;
      &lt;div class="content"&gt;abc&lt;/div&gt;
  &lt;/div&gt; &lt;!-- main-container end --&gt;
  
  &lt;div class="footer"&gt;&lt;/div&gt; &lt;!-- footer end --&gt;
  
  &lt;div class="bg-container"&gt;&lt;/div&gt; &lt;!-- bg-container end --&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>layout.css:</p>
  
  <pre><code>@charset "utf-8";
  /* CSS Document */
  
  .bg {
      background: url(../images/thematic.jpg) repeat scroll;
  }
  .header {
      background: transparent url("../images/trans.png") repeat scroll 0 0;
      height: 80px;
      min-width: 990px;
      width: 100%;
      z-index: 100;
  }
  .bg-container {
      background: #F00;
  }
  
  .footer {
    background: url("../images/trans.png") repeat scroll 0 0 transparent;
    bottom: 0;
    font-size: 10px;
    height: 30px;
    left: 0;
    min-width: 990px;
    overflow: hidden;
    width: 100%;
  }
  .content {
      width: 990px;
      margin: 0px auto;
      background: #999;
  }
  .main-container {
      min-height: 500px;
      width: auto;
  }
  </code></pre>