title: jQuery background image rezize on zoom or window resize
body: <p>I've got a problem.
  I want a background image in a <code>div</code> container with a width of 100% of the window.
  I want that it changes when I zoom and it should resize when I resize the window.</p>
  
  <p>Here is my try:
  <div class="snippet" data-lang="js" data-hide="false" data-console="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var imageWidth = 1024;
  var imageHeight = 600;
  
  $(document).ready(function(){
      jQuery(window).resize(function(){
          resizeImage();
          api.reinitialise();
      }   
  }
  
  $(window).resize(function () {resizeImage()});
  
  function resizeImage() {
  var navWidth = jQuery(window).width();
  var navHeight = jQuery(window).height();
  var navRatio = navWidth / navHeight;
  var imageRatio = imageWidth / imageHeight;
  if (navRatio &gt; imageRatio) {
      var newHeight = (navWidth / imageWidth) * imageHeight;
      var newWidth = navWidth;
  } else {
      var newHeight = navHeight;
      var newWidth = (navHeight / imageHeight) * imageWidth;
  }
  var newTop = 0 - ((newHeight - navHeight) / 2);
  var newLeft =  0 - ((newWidth - navWidth) / 2);
  $('#image').css({height: navHeight, width: navWidth});
  $('#image img').css({height: newHeight, width: newWidth, top: newTop, left: newLeft});
  $('#image').css({visibility:"visible", display:"block"});
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>img { border:0px; }
  html { height:100%; }
  body { width: 100%; height: 100% ; text-align:left; font: normal 12px Arial}
  div#image {position:fixed; z-index:98; display:block;}
  div#image img {overflow:hidden; position:absolute; z-index:99;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
      &lt;link rel="stylesheet" href="style.css" type="text/css" media="screen" /&gt;
      &lt;script type="text/javascript" src="test.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="image"&gt;&lt;img src="http://www.cdelit.com/images/rocketlauncher/frontpage/showcase/img2.png" alt="" /&gt;&lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem now is, that the image is resized to the wrong size.</p>