title: Responsive background jQuery issue
body: <p>I'm trying to make responsive background slideshow in custom Drupal theme. Slideshow part is covered by Drupal's modules (Views, Slideshow), and images are positioned by CSS. Now, I have written a simple jQuery code that makes images stretch and fill the screen. I was thinking that everything is OK, until I tested it in IE. Later, I discovered more issues. So, here they are:</p>
  
  <pre><code>1. In IE9, this code works only on first image, others keep their original sizes. 
  2. In IE8 there is no background images at all on the screen. 
  3. In Firefox, after a while, browser crash. 
  </code></pre>
  
  <p>Something is probably terribly wrong with this little code of mine, but I cannot find what:</p>
  
  <pre><code>    $(document).ready(function() {
      stretchBg();
      var windowWidth;
      var windowHeight;
      var imageWidth;
      var ratio;
      var imageHeight;
      function stretchBg() {
      windowWidth = $(window).width();
  windowHeight = $(window).height();
  $('#background img').each(function() {
    imageWidth =  $(this).attr('width');
    ratio = parseFloat(windowWidth / imageWidth).toFixed(2);
    imageHeight = $(this).attr('height') * ratio;
    if(windowHeight &lt;= imageHeight) {
      $(this).attr('width', windowWidth);
      } else {
      $(this).attr('height', windowHeight);
    }
  }); 
      }  
      $(window).resize(function() {
      stretchBg();
      });
      });
  </code></pre>
  
  <p>Note: I am using attr() and not width() for the images because they are hidden with display:none property and their dimensions cannot be retrieved before they are loaded.</p>
  
  <p><strong>Thank you very much, I highly appreciate your help.</strong> </p>