title: Dynamically Changing CSS Background Image
body: <p>What I'm looking for is a way to make my HTML header tag change background images every few seconds. Any solutions are welcome, as long as it is not to complex.</p>
  
  <p>I have this code right now as well as linking to JQuery:</p>
  
  <p><code>&lt;script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"&gt;&lt;/script&gt;</code></p>
  
  <pre><code>$(function() {
      var header = $(‘.mainHeader’);
      var backgrounds = new Array(
          ‘url(img/rainbow.jpg)’,
          ‘url(img/chickens_on_grass.jpg)’
          ‘url(img/cattle_on_pasture.jpg)’
          ‘url(img/csa_bundle.jpg)’
      );
      var current = 0;
  
      function nextBackground() {
          header.css(‘background’,backgrounds[current = ++current % backgrounds.length]);
          setTimeout(nextBackground, 10000);
      }
  
      setTimeout(nextBackground, 10000);
      header.css(‘background’, backgrounds[0]);
  });
  </code></pre>
  
  <p>My HTML header:</p>
  
  <p><code>&lt;header class="mainHeader"&gt;&lt;/header&gt;</code></p>
  
  <p>And CSS:</p>
  
  <pre><code>.mainHeader {
      background: no-repeat center bottom scroll; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      min-height: 150px;
      padding-top: 2%;
      font-size: 100%;
  }
  </code></pre>
  
  <p>Right now I have now background image at all.</p>