JSFiddle - React, Tailwind, and code Playground

HTML

<div id="background1" class="bg"></div>
<div id="background2" class="bg"></div>

CSS

.bg {
    position:fixed;
    width:100%;
    height:100%;
    transition:all 1s;
    background-size:cover;
}
#background1 {
    background-image:url("http://lorempixel.com/200/200/");
    opacity:1;
}
#background2 {
    opacity:0;
}

JavaScript

var backgrounds = ["http://lorempixel.com/200/200/", "http://lorempixel.com/250/250/"];

var current = 0;
$bg1=$("#background1");
$bg2=$("#background2");

window.setInterval(function () {
    current++;
    if (current>=backgrounds.length) { current=0;}
    if ($bg1.css("opacity")==1) {
        $bg2.css({
            "background-image":"url("+backgrounds[current]+")",
            "opacity":"1"});
        $bg1.css("opacity","0");
    }
    else {
        $bg1.css({
            "background-image":"url("+backgrounds[current]+")",
            "opacity":"1"});
        $bg2.css("opacity","0");
    }
}, 5000);