title: Scaling background image in a div
body: <p>I know there's some plugins about for scaling a background image for a webpage, but this is a bit different.</p>
  
  <p>I'm trying to get a div to resize proportionally, and have the background image inside also resize proportionally. It works for resizing horizontally.</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd"&gt;
  
  &lt;html lang="en"&gt;
  &lt;head&gt;
   &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
   &lt;title&gt;&lt;/title&gt;
   &lt;style type="text/css" media="screen"&gt;
  
    body {
     background: #000;
     overflow-x: hidden;
     overflow-y: hidden;
    }
    #bg
    {
     z-index: -1;
     position: absolute;
     top:0;
     left:0;
    }
  
    #wrap
    {
     position: relative;
     margin: 0 auto;
    }
   &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
   &lt;div id="wrap"&gt;
    &lt;img src="bg.jpg" id="bg" width="100%" /&gt;
  
  
    hi
   &lt;/div&gt;
   &lt;script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"&gt;
  
   &lt;/script&gt;
   &lt;script type="text/javascript" charset="utf-8"&gt;
  
    var minWidth = 400;
    var minHeight = 400;
    var maxWidth = 500;
    var maxHeight = 500;
  
    function resize() {
     var windowWidth = $(window).width();
     var windowHeight = $(window).height();
  
     var w = windowWidth &lt; minWidth ? minWidth :
     windowWidth &gt; minWidth &amp;&amp; windowWidth &lt; maxWidth ? windowWidth :
     windowWidth &gt; maxWidth ? maxWidth :
     minWidth;
  
     var h = windowHeight &lt; minHeight ? minHeight :
     windowHeight &gt; minHeight &amp;&amp; windowHeight &lt; maxHeight ? windowHeight :
     windowHeight &gt; maxHeight ? maxHeight :
     minHeight;
  
     $("#wrap").css({
      'width': w + 'px',
      'height': h + 'px'
     });
  
  
  
  
  
    }
  
    $(document).ready(function() {
  
     resize();
        $(window).resize(function() {
          resize();
        });
    });
  
  
   &lt;/script&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>