Create Background Image Slider Using HTML And CSS

Hey Guys, Welcome To the Codewithrandom Blog, In Today’s Blog We Are Going To See How To Create a Background Image Slider Using HTML and CSS. Before That, We Could See How The Project will be.

In this project,  We are using the animation properties on backgrounds to change it automatically which is like a slider, and we add three to four images as backgrounds, and those backgrounds will be performed as slides by changing the pictures. It might be interesting if we start working on it.

50+ HTML, CSS and JavaScript Projects With Source Code

In this project, we included numerous photos that slide at predetermined intervals to modify the backdrop image to get the desired effect.

So Let’s begin our project by adding the Source Codes. Here we are using the HTML Code first.

HTML Code For Background Image Slider:-

<div class="main-content">
  <h1 class="main-heading">Background image slider with CSS</h1>
</div>
<ul class="slideshow">
  <li>
    <span class="img-bg-slide">Image 01</span>
  </li>
  <li>
    <span class="img-bg-slide">Image 02</span>
  </li>
  <li>
    <span class="img-bg-slide">Image 03</span>
  </li>
  <li>
    <span class="img-bg-slide">Image 04</span>
  </li>
</ul>

Here, We first create a div class with the class name main-content to make styling and alignment later in CSS Section.

Second, We just adding the UL class and inside the class, we are adding the List option using (LI).

Third, We are creating a span class with a separate class name so it would act as a slider image in the output.

Portfolio Website using HTML and CSS (Source Code)

Lastly, We have successfully added our markup (HTML ). So We can move on to CSS for making the background slide and make styling of other elements for User-Attraction.

Output:

CSS Code For Background Image Slider:-

html {
  font-size: 62.5%;
}
.main-heading {
  opacity: 1;
  position: absolute;
  width: 50%;
  font-size: 3rem;
  z-index: 100;
  top: 2em;
  left: 2em;
  color: #FFFFFF;
}
/* BG SLIDESHOW CSS */
.slideshow,
.slideshow::after {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 0px;
}
.slideshow::after {
  content: '';
  background: linear-gradient(-70deg, rgba(0,0,0,0), rgba(0,0,0,1));
}
.img-bg-slide {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  color: transparent; /*hides span's text*/
  background-size: cover; /* covers whole viewport */
  background-position: 100% 100%;
  background-repeat: none;
  opacity: 0;
  z-index: 0;
  animation: backgroundSlideshow 60s linear infinite 0s;
}
.slideshow li:nth-child(1) .img-bg-slide {
   background-image: url('https://i.imgur.com/8TrVYTS.jpg');
}
.slideshow li:nth-child(2) .img-bg-slide { 
    background-image: url('https://i.imgur.com/DDa43Fn.jpg');
    animation-delay: 15s; 
}
.slideshow li:nth-child(3) .img-bg-slide { 
    background-image: url('https://i.imgur.com/KxOhxyk.jpg');
    animation-delay: 30s; 
}
.slideshow li:nth-child(4) .img-bg-slide { 
    background-image: url('https://i.imgur.com/R0jp6Br.jpg');
    animation-delay: 45s; 
}
@keyframes backgroundSlideshow {
  0% { opacity: 0;}
  12.5% { opacity: 1;}
  25% { opacity: 1;}
  37.5% { opacity: 0;}
  100% { opacity: 0;} 
}
/* End of BG SLIDESHOW */

Now We added our CSS code. In this code, First We fix the font values in the HTML section to make the content appear in the given font size.

Build a Multi Step Form Using HTML,CSS & JavaScript

Secondly, We start giving values for the content inside the main heading and the position of the contents is fixed to absolute so that the contents inside are placed in the background and it doesn’t get affected even by the background changes. and further, we give color, font, size, alignment(top, bottom), and z-index properties to it. The code for a particular explanation is given down.

html {
  font-size: 62.5%;
}
.main-heading {
  opacity: 1;
  position: absolute;
  width: 50%;
  font-size: 3rem;
  z-index: 100;
  top: 2em;
  left: 2em;
  color: #FFFFFF;
}

Responsive Navbar With Hamburger Menu Using HTML and CSS

Third, We started applying our CSS properties for the background slider which starts sliding. During this sliding the background images’ top , and left alignments are assigned to zero so the images will be fully covered for the entire background. and this line is done using the selector property (after::) so that the images and contents would act as per the values given.

Now we have given the values inside img-slide for the images that need to be performed as per values during slide transition and the name for animation is also given. The code for the above explanation is down below.

.slideshow,
.slideshow::after {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 0px;
}
.slideshow::after {
  content: '';
  background: linear-gradient(-70deg, rgba(0,0,0,0), rgba(0,0,0,1));
}
.img-bg-slide {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  color: transparent; /*hides span's text*/
  background-size: cover; /* covers whole viewport */
  background-position: 100% 100%;
  background-repeat: none;
  opacity: 0;
  z-index: 0;
  animation: backgroundSlideshow 60s linear infinite 0s;
}

Weather App Using Html,Css And JavaScript 

The Last thing we are doing is adding the nth-child property to make the images start sliding. For that, we are creating separate nth-child CSS properties with differ in names and for each property, we are adding different images that need to perform transitions on backgrounds.

The animation with the name was set and the start, delay, and finish time is given lastly we are adding some opacity to reduce the blur ness of the image during the next-next transition, the percentage value was added for the opacity values to be performed on a specific percentage. so it would start the sliding according to the values given. The specific part of the code for the above explanation.

.slideshow,
.slideshow::after {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 0px;
}
.slideshow::after {
  content: '';
  background: linear-gradient(-70deg, rgba(0,0,0,0), rgba(0,0,0,1));
}
.img-bg-slide {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  color: transparent; /*hides span's text*/
  background-size: cover; /* covers whole viewport */
  background-position: 100% 100%;
  background-repeat: none;
  opacity: 0;
  z-index: 0;
  animation: backgroundSlideshow 60s linear infinite 0s;
}
.slideshow li:nth-child(1) .img-bg-slide {
   background-image: url('https://i.imgur.com/8TrVYTS.jpg');
}
.slideshow li:nth-child(2) .img-bg-slide { 
    background-image: url('https://i.imgur.com/DDa43Fn.jpg');
    animation-delay: 15s; 
}
.slideshow li:nth-child(3) .img-bg-slide { 
    background-image: url('https://i.imgur.com/KxOhxyk.jpg');
    animation-delay: 30s; 
}
.slideshow li:nth-child(4) .img-bg-slide { 
    background-image: url('https://i.imgur.com/R0jp6Br.jpg');
    animation-delay: 45s; 
}
@keyframes backgroundSlideshow {
  0% { opacity: 0;}
  12.5% { opacity: 1;}
  25% { opacity: 1;}
  37.5% { opacity: 0;}
  100% { opacity: 0;} 
}

Here is Background Image Slider Output:-

Gym Website Using HTML and CSS (Source Code)

Now we have completed our project by adding the complete source codes. But there one more thing we do is to view our project in the given output section.

Final Output Of Background Image Slider Using Html and Css:

Video Output Of Background Image Slider:-

Hey there, We have successfully created our Background Image Slider Using HTML and CSS. Now if you want to create this project you can use the above code for your project additionally the project code pen with a link was added, so you can make use of it.

Create Slideshow Using Only HTML And CSS (Source Code)

If you find out this blog useful? The name is sure to search Codewithrandom on Google for 100+ front-end projects with source codes. also, make sure to follow codewithrandom on Instagram.

REFER CODE – Pesio

WRITTEN BY – Ragunathan S