Slide of background images

Question

I want to do a slide fadein/fadeOut with background images. I have this code that seems to be working except the background image does not change. Any hint?

CSS:

body, html {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }

jQuery:

$('body').css({
        "background-image":"url(imgs/imgTest.jpg)"
    });
    var imgsArray = ['imgs/imgTest.jpg', 'imgs/yo.jpg', 'imgs/hey.jpg'];

    setInterval(function(){
        for (var i = 0; i < imgsArray.length; i++) {
            $('body').css({
                "background-image": imgsArray[i]
            });
        }
    }, 1000);

Answer 1

With the code below you will get regularly

$(document).ready(function () {
    $('body').attr('style', 'background:url(http://www.lorempixel.com/300/300) no-repeat');

});
var imgsArray = ['http://www.lorempixel.com/300/300', 'http://www.lorempixel.com/300/300'];

setInterval(function () {
    for (var i = 0; i < imgsArray.length; i++) {
        $('body').attr('style', 'background: url(' + imgsArray[i] + ') no-repeat');
    }
}, 1000);

In the case of the example, as I’m catching lorempixel of the same size, it updates so fast that it picks up the same image. To work, just change the lorempixel to the path of your image and in addition, adjust the speed of your setInterval.