jQuery body background-image rotator

jquery css background slider image-rotation
Dane Wilson picture Dane Wilson · Jun 2, 2012 · Viewed 11.4k times · Source

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

doptrois picture doptrois · Jun 2, 2012

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

Related questions

Change background color of jQuery autocomplete item based on state (using CSS)

The goal is to create a JQuery autocomplete element whose list items have a blue background when they're hovered over or focused via the keyboard. The Facebook search box pulls this off nicely. Each <li> element contains custom …

Read More
Fluid background image on browser resize

I want to achieve the fluid background image effect that you can see in this webpage: http://217.116.9.130/test2.html (taken from zara.com) If you resize your browser to the left the woman in the image goes left with your …

Read More
CSS or jQuery scalable background image with NO white space underneath when img height is less than window height

Oldie but goodie, I know. This question is asked so many times and yet I haven't had a definitive answer. Scalable background image, preferably CSS only, willing to use jQuery in support if it's a must. A problem I've run …

Read More