Animate Multiple Background Images – CSS Only Version

by Feb 24, 2018Background Hacks0 comments

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.

This is the background effect in a CTA module with a purple background overlay

   Copy and paste the following CSS into the Page’s Custom CSS box.
#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; }
   Type or Paste animated-background in Section’s CSS ID box.

**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!

Give this page a share, like, or comment if this worked for you! Leave a comment if you have a question or want to share some love 😀

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.