title: JavaScript, How to change the background of a div tag every x seconds
body: <p>I'm trying to make some JavaScript code to change the background of two div tags every X seconds.  Here is my code:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="bg_left"&gt;&lt;/div&gt;
  &lt;div id="bg_right"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS
      body{
          height:100%;
          }</p>
  
  <pre><code>#bg_left{
     height:100%;
     width:50%;
     left:0;
     position:fixed;
     background-position:left;
  }
  #bg_right{
      height:100%;
      width:50%;
      right:0;
      position:fixed;
      background-image:url(http://presotto.daterrawebdev.com/d/img/pp_hey_you_bg.png);
      background-position:right;
  }  
  </code></pre>
  
  <p>JAVA SCRIPT</p>
  
  <pre><code> function carousel_bg(id) {
       var bgimgs = [  'pp_hey_you_bg.png', 'burningman_bg.png' ]; 
       var img1 = bgimgs[id];
       var img2 = bgimgs[id+1];
       var cnt = 2; 
  
       $('#bg_left').css("background-image", "url(http://presotto.daterrawebdev.com/d/img/"+img1+")");
       $('#bg_right').css("background-image", "url(http://presotto.daterrawebdev.com/d/img/"+img2+")");
  
       id = id + 1;
       if (id==cnt) id = 0;
  
       setTimeout("carousel_bg("+id+")", 10000); 
   }
  
   $(document).ready(function() {
          carousel_bg(0);     
   });
  </code></pre>
  
  <p>​
  The background-images should be changing randomly, but they don't even change at all.</p>