Question

When a user loads my page I want to let the background color be white then after 5 seconds fade away the color and fade in the picture. And after 5 seconds fade in another picture again so you can create sort of a slide show in the background behind my content. This is what I have now but it doesn’t work, any help?

$(document).ready(function() {
setTimout(function() {
    $('body').css("background-image","url('../img/background/1.jpg')").fadeIn(1000)
},5000);

function repeat() {
    $('body')
        .delay(5000).css("background-image","url('../img/background/2.jpg')").fadeIn(1000)
        .delay(5000).css("background-image","url('../img/background/3.jpg')").fadeIn(1000)
        .delay(5000).css("background-image","url('../img/background/1.jpg')").fadeIn(1000);
}
window.setInterval(repeat, 18000);
});

Answer 1

The following is a syntax error:

setTimout(function() {
$('body').css("background-image","url('../img/background/1.jpg')").fadeIn(1000)
},5000);

Should be

setTimeout(function() {
$('body').css("background-image","url('../img/background/1.jpg')").fadeIn(1000)},5000);

It is missing the e in setTimeout

I also do not believe you will be able to fadeIn the background image unless you are setting it on a DIV unless you fadeOut the body. I have re-written your background changer into fewer lines of code that repeat with a list of images provided. This should keep looping for the images you have in the array.

$(document).ready(function () {
                var images = ["../img/background/1.jpg", "../img/background/2.jpg"];
                var index = -1;

                window.setInterval(function () {
                    index = (index + 1 < images.length) ? index + 1 : 0;
                    $('body').css("background-image", "url('" + images[index] + "')");
                }, 5000);
            });