Animate Multiple Background Images – CSS Only Version

You may want to know how to animate or fade between different background images in a Divi section.

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

*Update* Unfortunately, this CSS-only version causes a white flicker between photos the first time they are loaded into the container. To avoid this, check out the CSS and Javascript method of animating mulitple background images.

Otherwise, if your slider isn’t at the top of the page, this CSS version may work out just fine for you since the reader will need to scroll down for a few seconds before they see the slider.

#animated-background{
animation: bgfade 15s infinite;
background-size:cover;
background-position:center;
background-color:#000;
position:relative;
}

@keyframes bgfade {
0% {
background-image: url(https://picsum.photos/1200/800?image=1074);
}
25% {
background-image: url(https://picsum.photos/1200/800?image=1070);
}
50% {
background-image: url(https://picsum.photos/1200/800?image=1071);
}
75% {
background-image: url(https://picsum.photos/1200/800?image=1072);
}
100% {
background-image: url(https://picsum.photos/1200/800?image=1074);
}
}

/****** add a background overlay *******/
#animated-background:before {
content:"";
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background-color:black;
opacity:0.3;
}

**Make sure the photo set at the 0% keyframe is the same as the 100% keyframe to avoid a jumpy loop.

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

Click here to see a working example.

Done!