Introduction
In this tutorial, you’ll learn how to create an HTML element with a background image that changes every 4 seconds using CSS animations.
Demo Slideshow
Set Up the HTML
To get started, set up your basic HTML and add a div element to the body. This will serve as the container for the slides . Give it a class of slide-container. Then, add three div elements inside the container. Give them each a class of slide and slide-<number>.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Background Slideshow</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="slide-container">
<div class="slide slide-1"></div>
<div class="slide slide-2"></div>
<div class="slide slide-3"></div>
</div>
</body>
</html>
Add the CSS
Next, add the styles for the slide-container. In this example, we set the container to be 600px wide and 400px tall. We also set the max-width to 100%, so it fits on smaller screens. Set the position to relative.
.slide-container {
height: 400px;
width: 600px;
max-width: 100%;
position: relative;
}
Now, add the styles for the slides. Set the position to absolute and the width and height to 100% so it fills the container. Don’t forget to set the background size and position properties as desired.
The animation property is using the bgSlideShow animation, which is set to run for 12 seconds (4 seconds for each of the 3 slides). The animation-timing-function is set to ease-in-out so we get a smooth transition between images. The animation-iteration-count is set to infinite so the slides continue to loop.
.slide {
animation: bgSlideShow 12s ease-in-out infinite;
background-position: center;
background-size: cover;
height: 100%;
position: absolute;
width: 100%;
}
Next, set the individual slide backgrounds with the images of your choosing and add the animation-delay for each slide. If you want to ensure that the slides are layered properly and appear in the correct order on the slideshow, you can set the z-index of each in descending order.
.slide-1 {
animation-delay: 0s;
background-image: url(/images/wombat-1.webp);
z-index: 3;
}
.slide-2 {
animation-delay: 4s;
background-image: url(images/wombat-2.webp);
z-index: 2;
}
.slide-3 {
animation-delay: 8s;
background-image: url(/images/wombat-3.webp);
z-index: 1;
}
Lastly, add the animation using @keyframes. Here the animation is simply changing the opacity from 1 to zero and then back to 1.
@keyframes bgSlideShow {
0% {
opacity: 1;
}
33% {
opacity: 0;
}
66% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Other Considerations
- Make sure the images are sized appropriately. You wouldn’t want to use an image that is less than 600px by 400px for this example, since it would likely look blurry or pixelated when displayed at those dimensions. You also don’t want to use an image that is really large. The larger the image, the longer it takes to load in the browser. If you have a really large image, you can resize it using a free online tool, such as Adobe Express Resize Image.
- You can also compress images to optimize for performance using tools such as Shortpixel’s Free Online Image Compressor.
