Change Background With Setinterval

I want to have the background image of a page change every 5 seconds. There are 5 images and I want them to loop. I researched thoroughly here and tried different approaches. Can s

Solution 1:

I edited the fiddle: http://jsfiddle.net/5Cv49/1/.

Enter and see. The only markup there is the:

<div id="wrapper"></div>

The only css modified is:

adding #wrapper to the selector.

See how background is overlapped by #wrapper's background.

Solution 2:

Works in the fiddle.It means you need to run script after page load like the fiddle does:

$(window).load(function(){
    //your script
});

Working fiddle

Solution 3:

One approach that I personally have done in the past is to have a full page slideshow using jQuery. there are a number of versions of slideshow you can use from the internet. There are 100s of them some better than others. In the slideshow have it times to change every 5 seconds like you wanted. in your html wrap the slideshow in a div (#slideshow_background for example). wrap the rest of your html page into another wrapper (#content). in your CSS set the following..

#slideshow_background {
   margin:0;
   padding: 0;
   position : initial;
   width: 100%;
   height:100%;
}

the put the css for your #content and set the z-index to 1 so that it lies above the slideshow.hope this helps