Change the body background image with fade effect in jquery

Question

Hey i want to fade in a new background image let´s say every 60 seconds. I´ve set the background image like this:

body {background-image: url(background.jpg);}

Now i want to change it, so after 60seconds it changes to background2.jpg, then after 60 seconds to background3.jpg and so on..

I´ve found a lot of stuff without changing it in the body but just as an image... any quick solutions?

Thank you!

Answer 1

Re-UPDATE of the UPDATE:

Even NEWER Fiddle (without arguments.callee)

Changes:

• Javascript improvements
• CSS corrections (fits full page now)
• Added option for random sequence of images instead of sequential
• => Alternate version of NEWER Fiddle <= (if OP's img server is down)

---

BIG UPDATE

---

Took the meat of this code from this previous answer and added some bling (using my site background stash lol)

original fiddle :)

NEW Super Fiddle

Javascript:

$(document).ready(function () {
    var img_array = [1, 2, 3, 4, 5],
        newIndex = 0,
        index = 0,
        interval = 5000;
    (function changeBg() {

        //  --------------------------
        //  For random image rotation:
        //  --------------------------

            //  newIndex = Math.floor(Math.random() * 10) % img_array.length;
            //  index = (newIndex === index) ? newIndex -1 : newIndex;

        //  ------------------------------
        //  For sequential image rotation:
        //  ------------------------------

            index = (index + 1) % img_array.length;

        $('body').css('backgroundImage', function () {
            $('#fullPage').animate({
                backgroundColor: 'transparent'
            }, 1000, function () {
                setTimeout(function () {
                    $('#fullPage').animate({
                        backgroundColor: 'rgb(255,255,255)'
                    }, 1000);
                }, 3000);
            });
            return 'url(http://www.fleeceitout.com/images/field.' + img_array[index] + '.jpg)';
        });
        setTimeout(changeBg, interval);
    })();
});

CSS:

body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    background-image: url(http://www.fleeceitout.com/images/field.2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-attachment: fixed;
}
#fullPage {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    top: 0;
    left: 0;
    background-color: rgb(255, 255, 255);
}

Answer 2

You can use the setInterval method and switch between classes defined in your CSS which have different background-images:

setInterval(function() {
    var $body = $('body');
    if($body.hasClass('background1'))
    {
        $body.removeClass('background1');
        $body.addClass('background2');
    }
    else {        
        $body.removeClass('background2');
        $body.addClass('background1');
    }
}, 1000);

Fiddle

This example uses an interval of 1000 which is one second. You can change this value for whatever period of time you're looking for.

UPDATE

Noticed your question asked for a fade so I added a CSS3 property on body:

body
{
    transition: background 0.5s linear;
}

The fiddle has been updated.