Rotating Background

by Matthew Day

HTML

<div id="background"></div>

<!--

Fiddle by Rory McCrossan
http://stackoverflow.com/questions/35272817/change-background-image-using-jquery-addclass

-->

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);