jQuery body background-image rotator

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 bgStretcher But this caused appearance issues and made the website slow and choppy. I would preferably like the images to fade in and out. Help would be appreciated, Here's a link to the website 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" Here is my current code which I am trying to get working: ``` $(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); } ``` Once I can figure out how to transition between background images I can simpily add some conditions to change between an array of images. Cheers, Dane Wilson