JSFiddle - React, Tailwind, and code Playground
HTML
<div id="background"></div>
CSS
#background {
width: 100px;
height: 100px;
font-size: 1.5em;
background-color: #000;
background-position: left;
background-size: cover;
background-repeat: no-repeat;
background-attachment: scroll;
}
#background.background1 {
background-color: #c00;
}
#background.background2 {
background-color: #0C0;
}
#background.background3 {
height: 20%;
background-color: #00C;
}
JavaScript
var count = 0;
var classes = [ 'background1', 'background2', 'background3' ];
function updateBackground() {
$('#background').removeClass(classes.join(' ')).addClass(classes[count % classes.length]);
count++;
}
setInterval(updateBackground, 2000);