Trying to make multiple background images cycle through a slideshow with CSS and JQUERY

Question

I\'ve placed three background images in a div. I\'m trying to make all three of them cycle through on a timer that fades in and out. I\'ve actually found similar quesitons o

Answer 1

CSS

#background-slideshow {
    transition: background 1.5s ease; 
    background-position: center top, center top, center top; 
    background-size: cover, cover, cover;
    background-repeat:  no-repeat, no-repeat, no-repeat;
    background-image: url(img/background-1.jpg), url(img/background-2.jpg), url(img/background-3.jpg);
}

JS

var i = 1;
setInterval(function() { 
    e = document.getElementById('background-slideshow');
    switch (i) {
        case 0:
            e.style.backgroundPosition = 'center top, center top, center top';
            break;
        case 1:
            e.style.backgroundPosition = window.innerWidth + 'px top, center top, center top';
            break;
        case 2:
            e.style.backgroundPosition = window.innerWidth + 'px top, ' + window.innerWidth + 'px top, center top';
            break;
    }
    i++;    
    if (i > 2) i = 0;   
}, 3000);