Fade background image in and out with jQuery?

You can fade background colors but not background images. The way to work around this is to have your images as <img> tags and hide them by default display:none;. Give your images position:absolute and z-index:-1 so they act like backgrounds and are behind everything else.

Here’s a quick example of images fading one after the other.

HTML

<img src="https://stackoverflow.com/questions/5533171/.." />
<img src="https://stackoverflow.com/questions/5533171/.." />

CSS

img{
 position:absolute;
 z-index:-1;
 display:none;
}

jQuery

function test() {
    $("img").each(function(index) {
        $(this).hide();
        $(this).delay(3000* index).fadeIn(3000).fadeOut();
    });
}
test();

Check working example at http://jsfiddle.net/RyGKV/