Image Slide show Background for a Webpage using CSS

At times, we want to use an image slide show for displaying images in the background of our webpage and this is a difficult task. But with the advancement in the field of web development, it became easy to do so with using some jQuery or JavaScript on the webpage and achieve this goal. But I feel using additional lines of code to implement jQuery or JavaScript is not worth it. We can actually do that by using some of the properties in CSS3. CSS3 introduced a new property, the animation property. We already saw the animation property when I told you how to create a simple animated background for a webpage. If you missed that post, go ahead and read “How to Create animated Background using CSS“. In today’s tutorial, I would like to share with you all a way to create an image slide show background for your webpage. This can be useful when you want to display some images to the user, by default on any page as the background!

View Demo | Download

Before we get started doing the coding part, let me ask you to save this file “grid.png“. We will use this image to overlay on our background image to create a nice effect! Also, I am going to use images of the dimension 1440 x 900 pixels for this tutorial. I find them to be able to fit all screen sizes and devices. So now, let’s get started!

Image Slide show Background using CSS

First, let us create an HTML page, where we want the background to appear. We will do that by creating an un-ordered list (ul) and implementing each image as a list item within that list. This is the basic structure of the HTML page that I created. If you want, you can use it. Save this as index.html.

<!--<span class="hiddenSpellError" pre=""-->DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
xmlns="http://www.w3.org/1999/xhtml">
CSS Image Slideshow Background using CSS
	css/style.css"  /></pre>
<ul>
	<li>Image 1</li>
	<li>Image 2</li>
	<li>Image 3</li>
	<li>Image 4</li>
	<li>Image 5</li>
	<li>Image 6</li>
</ul>
<pre>

Now, create two new folders in the same directory, name them “css” and “images“. Inside the images folder, put all the images you want to display as the image slide show background and also the image you downloaded above, the grid.png file. Now, in the CSS folder, create a new file and name it “style.css”.

The CSS Part

In the CSS file, let’s first start by clearing out the margin and padding for every HTML element. This helps us get a full background image for the webpage. Inside the CSS file, place the following code:

*{
margin:0;
padding:0;
}

Now, let’s start by specifying the styling for the un-ordered list and each list item. Here, we will also specify the Animation and the background for each and every list item. Also, to make it cross-browser compatible, we will include the -webkit, -o, -ms, and the -moz attributions as well.

.home-slideshow, .home-slideshow:after{
position:fixed;
width:100%;
height:100%;
top:0px;
left:0px;
z-index:0;
list-style:none;
}

.home-slideshow:after{
content: '';
background: transparent url(../images/grid.png) repeat top left;
}

.home-slideshow li span{
width:100%;
height:100%;
position:absolute;
top:0px;
left:0px;
color:transparent;
background-size:cover;
background-position: 50% 50%;
background-repeat:none;
opacity:0;
z-index:0;
-webkit-animation: imageFade 36s linear infinite 0s;
-moz-animation: imageFade 36s linear infinite 0s;
-o-animation: imageFade 36s linear infinite 0s;
-ms-animation: imageFade 36s linear infinite 0s;
animation: imageFade 36s linear infinite 0s;
}

.home-slideshow li:nth-child(1) span{
background:url(../images/home1.jpg);
}

.home-slideshow li:nth-child(2) span{
background:url(../images/home2.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay:6s;
}

.home-slideshow li:nth-child(3) span{
background:url(../images/home3.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}

.home-slideshow li:nth-child(4) span{
background:url(../images/home4.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}

.home-slideshow li:nth-child(5) span {
background-image: url(../images/home5.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.home-slideshow li:nth-child(6) span {
background-image: url(../images/home6.jpg);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}

Now, we are done with the most of the part for our sliding image background. What we are left with is defining the actual fading animation. To do this, place the following lines of code into the CSS file.

@-webkit-keyframes imageFade {
0% { opacity: 0;
-webkit-animation-timing-function: ease-in; }
8% { opacity: 1;
-webkit-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes imageFade {
0% { opacity: 0;
-moz-animation-timing-function: ease-in; }
8% { opacity: 1;
-moz-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes imageFade {
0% { opacity: 0;
-o-animation-timing-function: ease-in; }
8% { opacity: 1;
-o-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes imageFade {
0% { opacity: 0;
-ms-animation-timing-function: ease-in; }
8% { opacity: 1;
-ms-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes imageFade {
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 }
}

Voila! That’s all. You just finished creating the image slide show background for your webpage. If you are lazy to do all this copy paste and stuff, you can download the entire project from our website by following the appropriate link.

Download Source Code

If you face any problem during any step, feel free to contact me via the comments section below. Also, don’t forget to subscribe to Slash Coding for latest post updates via RSS Feeds, Facebook, Google+ or Twitter.