How to create a background image slide show using CSS Animations – No JavaScript required

If you’re looking to add a dynamic, visually appealing image slide show as a background to a section or div on your webpage, you’ll be pleased to know that you don’t necessarily need JavaScript to accomplish this.

With CSS animations, you can create a fantastic background image slide show without any JavaScript. This tutorial will walk you through creating a CSS-only background image slide show.

For example you might want to add an image slide show to the Searchbox section in your Brand Portal (as seen below)

Check it out live at https://wales.brandkitapp.com

Slide shows (aka hero image carousels) in Brandkit

This is a common design pattern used by a number of Brandkit customers. Traditionally this has been done using a Javascript framework, but if like us, you want to keep things as simple as possible, going without Javascript is a win.

However you don't need Brandkit to add a CSS Slideshow to a website. You can do this on any website - no special functionality required.

Pre-requisites

• Basic knowledge of HTML
• Understanding of CSS and CSS3 Animations (or learn about them here).
• Or willingness to learn

Step 1: HTML Structure

Start with a simple HTML structure for your slide show.

Name and/or identify the div or section that you want the background slide show to apply to. You may need to add a class name like “slideshow” (or any name you prefer)in order to target the div.

<div class="slideshow">
 ...
</div>

Step 2: Basic CSS Setup

Set your slide show to occupy the desired space on the page.

This could be the full viewport, or a specific size. We’re going to be using background images and want the image to occupy the whole div or section, so we also need to set the background-image properties like size, repeat and position.

.slideshow {
 width: 100vw;
 height: 33vw;
 background-size: cover;
 background-repeat: no-repeat;
}

Tip: If your slide show will be 100% screen width, use VW for your width and height, and set width to 100vw and height to ‘X’vw, where the ‘X’ is the proportional height of your image. We typically use an images cropped to 3 by 1 proportions (Panorama) - so we use a height of 33vw (1/3). For 16:9 proportions you would use 56vw (9/16), etc. This only works if the image is 100% screen width - because browsers don’t support calculated height - but that’s a whole other Post.

Step 3: CSS setup animation keyframes

The idea is to swap the background image over a set duration (which we’ll set in the next step), giving the illusion of a slide show. So now we create a CSS keyframe animation that changes the background image of our div. Each background image will be a keyframe in a sequence.

You’ll need to upload your background images somewhere to call in your CSS. In Brandkit you do this by uploading to your brand portal’s Static Files area (Admin > CMS > Static Files).

Once you’ve uploaded your background images, copy the URL of each and paste into your keyframes CSS (as seen below).

Note that the @keyframes clause needs the name of your div or section from Step 1.

We then divide up the duration of animation (well set that up in the next step next) by the number of images we want to use. In this example we have 3 background-images, so we have 4 keyframe positions on the animations timeline. 0% for the initial state where we’ll show the first image, then 33% for slide 2, 66% for slide 3 and lastly 100% to show slide one again.

@keyframes slideshow {
 0% { background-image: url("image1.jpg"); }
 33% { background-image: url("image2.jpg"); }
 66% { background-image: url("image3.jpg"); }
 100% { background-image: url("image1.jpg"); }
}

Step 4: Applying Animation to the Div

Finally, apply the animation to your div. The animation duration and delay can be adjusted according to the number of images and how long you want each image to be displayed.

.slideshow {
 animation: slideshow 15s ease-in-out infinite;
}

Putting it together

Your CSS should now include the following:

.slideshow {
 width: 100vw;
 height: 33vw;
 background-size: cover;
 background-repeat: no-repeat;
 animation: slideshow 15s ease-in-out infinite;
}

@keyframes slideshow {
 0% { background-image: url("image1.jpg"); }
 33% { background-image: url("image2.jpg"); }
 66% { background-image: url("image3.jpg"); }
 100% { background-image: url("image1.jpg"); }
}

The slideshow will now change background image every 5 seconds (15 seconds divided by 3 images), providing a smooth transition from one image to the next.

And that’s it – an elegant background image slideshow using only HTML and CSS!

This method is a lightweight solution for adding dynamic and visually appealing content to your website. You can adjust the timing, add more images, and even combine this with other CSS transitions and transformations to create more complex animations. Learn more about those here.

While CSS animations are fantastic for a variety of simple to moderately complex animations, more intricate or interactive animations may require JavaScript or JavaScript-based libraries for more flexibility and control. But for a quick, simple background image slideshow, CSS animations are a great solution.

Happy sliding :)