title: How to get my background images to loop through
body: <p>I am trying to loop through background images every few seconds using jquery fadeIn
  here is my HTML</p>
  
  <pre><code>&lt;div class="bg" style="background: url(images/header1.jpg);"&gt; &lt;/div&gt;
  &lt;div class="bg" style="background: url(images/header2.jpg);"&gt; &lt;/div&gt;
  &lt;div class="bg" style="background: url(images/header3.jpg);"&gt; &lt;/div&gt;
  </code></pre>
  
  <p>and here is my Jquery</p>
  
  <pre><code>function changeBackground () {
      $(".bg").first().fadeIn("slow", function showNext() {
          $(this).next("div").delay(1000).fadeIn("slow", showNext);
      });
  }
  
  $(document).ready(function() {
      setTimeout(changeBackground, 0);        
  });
  </code></pre>
  
  <p>I'm not sure how to hide the previous image so I can reintroduce it next time. The function loops or maybe could be done using <code>z-index</code> to bring images to top?</p>