Looking for a pure CSS background image slider to add as background? It comes with autoplay function which is perfect to run it as background. It’s developed with CSS and fully responsive.
It’s dead lightweight. Don’t you believe me? Check out the demo and download the source and find the few lines of CSS and HTML.
At the same time, this slider is also simple without any Dot or arrow navigation. Because it is designed for a background so it also don’t have thumbnail functionality.
But you can find our previous tutorial about creating CSS Image slider with thumbnail that also support arrow navigation for easy user experience.
The autoplay function included in this slider which changes photos automatically. By the help of CSS3 animation, We will @keyframescreate left to right animation.
To make the slider to cover all the page, We will use VH element that makes the slider in full height on every type of screen resolution.
We don’t need any JavaScript to handle its functionality and it still supports wide-range of browsers. But for the older browsers, you need to provide a fallback.
How to Create CSS Background Image Slider
The markup is dead simple. We need to define an ID bgslider and then place the figure HTML5 element inside it.
We will just add images just like shown below.
<div id="bgslider">
<figure>
<img src="images/slide1.jpg" alt="Slider">
<img src="images/slide2.jpg" alt="Slider">
<img src="images/slide3.jpg" alt="Slider">
<img src="images/slide4.jpg" alt="Slider">
<img src="images/slide5.jpg" alt="Slider">
</figure>
</div>
The CSS
You may think that the CSS is may be large but isn’t like that. You don’t need to write long page CSS but just need to use a few styling.
We will set to#bgslider overflow hidden.
Next, we will set the width of 500% for the figure. Why 500%? Because we have five images in the slider so each image need a width 100%
Our slider figure HTML5 attribute position will be relative, and here we will also add animation.
#bgslider {
overflow: hidden;
}
#bgslider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 30s slidy infinite;
}
We set each image to be 20% of the width because we have five images in the slider so each should be divided equally. We used VH height so it fits in full screen of every type of devices.
#bgslider figure img {
width: 20%;
float: left;
height:100vh;
}
In the end, we will use @keyframes to slide the image slider.
@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
This is what I try to do with responsive background slideshow. You can try to play with it and do customization as you want.
There are many CSS3 animations that can be used to make it slide in a different way. Hope you like this tutorial, please share this with your friends on Facebook or other social media.
