Background Slideshow HTML

This HTML & CSS code snippet helps you to create a simple background image slideshow. It uses CSS background-image property to slide the images with fade in and out effect after a specific time duration. The images are displayed in a fixed position and take up the entire width and height of the viewport. The animation is defined using CSS keyframes, and a fallback is provided for users who do not have CSS animations enabled.

Basically, the slideshow covers the whole page but you can also set it to a specific container like the hero section of your website. To do so, you just need to change the width and height of the slideshow after pseudo selector which is 100% by default.

How to Create Background Image Slideshow in HTML

In the first step, create an unordered list of empty span elements in HTML that will contain background images. Define the class attribute “slideshow” of the ul element as follows:

<ul class="slideshow">
	<li><span></span></li>
        <li><span></span></li>
	<li><span></span></li>
	<li><span></span></li>
	<li><span></span></li>
</ul>

Now, select the slideshow class in CSS and hide its default bullets using the list-style-type property with “none” value. Similarly, select the after pseudo-class and define position, width, height, and left values. Finally, target the span element and set background images and add CSS keyframes for slideshow animation.

.slideshow {
  list-style-type: none;
}

/** SLIDESHOW **/
.slideshow,
.slideshow:after { 
    top: -16px; /*Not sure why I needed this fix*/
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0px;
    z-index: 0; 
}

.slideshow li span { 
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 0;
    animation: imageAnimation 30s linear infinite 0s; 
}

.slideshow li:nth-child(1) span { 
    background-image: url("https://uploads-ssl.webflow.com/5976a3655fcd654cb3d604ca/5bfa14d04ae3429879830ee4_home-hero.jpg"); 
}
.slideshow li:nth-child(2) span { 
    background-image: url("https://uploads-ssl.webflow.com/5976a3655fcd654cb3d604ca/5c00c9ecd82b40364fc97f4b_bridge.jpg");
    animation-delay: 6s; 
}
.slideshow li:nth-child(3) span { 
    background-image: url("https://uploads-ssl.webflow.com/5976a3655fcd654cb3d604ca/5c00c9963ea913260bb41b0e_powerlines.jpg");
    animation-delay: 12s; 
}
.slideshow li:nth-child(4) span { 
    background-image: url("https://uploads-ssl.webflow.com/5976a3655fcd654cb3d604ca/5bfa14d04ae3429879830ee4_home-hero.jpg");   
    animation-delay: 18s; 
}
.slideshow li:nth-child(5) span { 
    background-image: url("https://uploads-ssl.webflow.com/5976a3655fcd654cb3d604ca/5c00c9963ea913260bb41b0e_powerlines.jpg");
    animation-delay: 24s; 
}

@keyframes imageAnimation { 
    0% { opacity: 0; animation-timing-function: ease-in; }
    8% { opacity: 1; animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}

.no-cssanimations .cb-slideshow li span {
	opacity: 1;
}

That’s all! hopefully, you have successfully created a background slideshow using HTML and CSS. If you have any questions or suggestions, feel free to comment below.