title: Change jQuery slideshow script to rotate background image defined in css class
body: <p>I'm using a simple piece of jQuery to rotate through (and randomize) a series of images. I'm wondering how difficult it would be to adjust it to rotate through background images that are defined by a class. </p>
  
  <p>The script looks like this:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
          jQuery.jQueryRandom = 0;
          jQuery.extend(jQuery.expr[":"],
          {
              random: function(a, i, m, r) {
                  if (i == 0) {
                      jQuery.jQueryRandom = Math.floor(Math.random() * r.length);
                  };
                  return i == jQuery.jQueryRandom;
              }
          });        
  
          $(function() {
            $('#slideshow img').not(':random').hide(); //hide all images except one initially
            setInterval(function(){
              $('#slideshow img:visible').fadeOut('slow')
                .siblings('img:random').fadeIn('slow') //find a random image
                 .end().appendTo('#slideshow');}, 
              9000); //2 second interval
          });
  &lt;/script&gt;
  </code></pre>
  
  <p>HTML is:</p>
  
  <pre><code>&lt;div id="slideshow"&gt;
    &lt;img src="banner1.jpg" /&gt;
    &lt;img src="banner2.jpg" /&gt;
    &lt;img src="banner3.jpg" /&gt;
    &lt;img src="banner4.jpg" /&gt;
    &lt;img src="banner5.jpg" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  #slideshow {
      width: 100%;
      position: relative;
      }
  
  #slideshow img {
      top: 0;
      left: 0;
      width: 100%;
      height: auto;
      position: absolute;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>So, what i'd like to do, but can't figure out is have the images rotate as a background applied to a class. So, instead of having all the images defined in the html, the would rotate through a class like this:</p>
  
  <pre><code>.slideshow {
  
    background: url(banner1.jpg) no-repeat bottom center;
  
  }
  </code></pre>
  
  <p>Is this possible with some adjustments to the script above?  Any pitfalls in this method?</p>
  
  <p>Thanks!</p>