Animate Multiple Background Images – CSS & Javascript Version

This post is an extension of the CSS-only way to do this. Unfortunately, the CSS method (as you’ll see) causes a white flicker between the images, the very first time they are loaded into the div. This CSS & Javascript version fixes that white flash.

This tiny bit of CSS and Javascript gives you a really nice looking background fade/slider.

#animated-bg {
  background: url("https://picsum.photos/1200/800?image=953") no-repeat center center;
  background-size: cover;
  transition: background 3s;
  position:relative;
}
#animated-bg:before {
content:"";
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background-color:violet;
opacity:0.3;
}

②  Type or paste animated-bg in the Section’s CSS ID box.

③   Paste the following Javascript into a code module somewhere on the page.

<script type="text/javascript">
var bgImageArray = ["953", "1073", "476", "932"],
base = "https://picsum.photos/1200/800?image=",
secs = 4;
bgImageArray.forEach(function(img){
    new Image().src = base + img; 
    // caches images, avoiding white flash between background replacements
});

function backgroundSequence() {
	window.clearTimeout();
	var k = 0;
	for (i = 0; i < bgImageArray.length; i++) {
		setTimeout(function(){ 
			document.getElementById('animated-bg').style.background = "url(" + base + bgImageArray[k] + ") no-repeat center center";
			document.getElementById('animated-bg').style.backgroundSize ="cover";
		if ((k + 1) === bgImageArray.length) { setTimeout(function() { backgroundSequence() }, (secs * 1000))} else { k++; }			
		}, (secs * 1000) * i)	
	}
}
backgroundSequence();
</script>

This will work in rows, columns, and modules too.

See the Pen Cross-Fade Background Images w/ CSS Transitions & JS by Charlie Wedel (@charliewedel) on CodePen.

Done!