Change background-image of a div with fade effect every 10 seconds with jquery

Question

I would like to create a slideshow in the header area of my page. It should change the background image every 10 seconds with a nice fade effect. And since I\'m using jQuery

Answer 1

You can't fade a background image. But you can fade a layer above your #header with your next background image...

Answer 2

You can fade a background image with CSS3 using transitions.

Check it out at https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

For your use, set up jQuery to change the background image, but apply the transition style using CSS. Anytime the background changes, it will transition according to the CSS3 style.

#header
{
    background: url('images/header_slides/slide_1.jpg') no-repeat;
    transition: background 0.5s linear;
    -moz-transition: background 0.5s linear; /* Firefox 4 */
    -webkit-transition: background 0.5s linear; /* Safari and Chrome */
    -o-transition: background 0.5s linear; /* Opera */
}

Answer 3

I answered a similar question at How to fill browser window with rotating background Image?. You can fade background colors but not background images. You must have your images in <img> tags and hide them by default display:none;. Give your images position:absolute and z-index:-1 so your images acts like a background images and are behind everything else.

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

Check working example at http://jsfiddle.net/ewsQ7/5/