jQuery body background-image rotator

Question

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

Answer 1

Very simple with this jQuery Plugin: jQuery Backstretch In the demos "Using Backstretch in a Slideshow" is a code-snippet for it.