title: jQuery body background-image rotator
body: <p>For a website I am currently designing I would like to have the body background on a rotation of an array of images. I have tried multiple ways i.e. using the fadeIn() and fadeOut() functions but they seem to affect the opacity of the divisions within the body. I also tried using <a href="http://www.ajaxblender.com/bgstretcher-jquery-stretch-background-plugin.html" rel="noreferrer">bgStretcher</a> But this caused appearance issues and made the website slow and choppy.</p>
  
  <p>I would preferably like the images to fade in and out.
  Help would be appreciated,</p>
  
  <p><a href="http://danewilson.me/ICT/arlberg/alpha" rel="noreferrer">Here's a link to the website</a> 
  The script file I currently have been modifying is called background.js under the /js/ directory. The file is currently commented out as It is only experimental.
  The two current background images are "images/bg/bg1.jpg" and "images/bg/bg2.jpg"</p>
  
  <p>Here is my current code which I am trying to get working:</p>
  
  <pre><code>$(document).ready(function() {
      setInterval(switchImage, 5000);
      switchImage();
  
  });
  
  function switchImage()
  {
  $('body').css("background-image", "url(../images/bg/bg2.jpg)").fadeIn(1000);
  $('body').css("background-image", "url(../images/bg/bg1.jpg)").fadeOut(1000);
  }
  </code></pre>
  
  <p>Once I can figure out how to transition between background images I can simpily add some conditions to change between an array of images.</p>
  
  <p>Cheers, Dane Wilson</p>