title: Change background with setInterval
body: <p>I want to have the background image of a page change every 5 seconds. There are 5 images and I want them to loop.</p>
  
  <p>I researched thoroughly here and tried different approaches. Can someone please tell me what is wrong with this code:</p>
  
  <p>In my css I have:</p>
  
  <pre><code>html, body, #wrapper {
      height:100%;
      margin: 0;
      padding: 0;
      border: none;
      background-image:url('images/indexbg01.jpg');
      background-repeat:no-repeat;
      background-attachment:fixed;
      background-position:center center;
  }
  </code></pre>
  
  <p>and my javascript I have:</p>
  
  <pre><code>var imageArray = ['images/indexbg02.jpg', 'images/indexbg03.jpg', 
                    'images/indexbg04.jpg', 'images/indexbg05.jpg', 
                    'images/indexbg01.jpg'];
  var imageIndex = 0;
  
  function changeBgImage(){
      var imageUrl = "url('" + imageArray[imageIndex] + "')";
      $('body').css('background-image', imageUrl);
      imageIndex++;
      if (imageIndex &gt;= imageArray.length) {
          imageIndex = 0;
      }
  }
  
  setInterval(changeBgImage, 5000);
  </code></pre>
  
  <p>I first had the imageUrl variable built in the line that follows, but I added this so I could check it was built ok.
  In the chrome debugger, when I put a breakpoint on the line following the imageUrl build line, it stops nicely every 5 seconds, the imageUrl is built as it should, yet the background does not change.</p>