Create Background Slider Image Using Html And Css Code

Create Background Slider Image Using Html And Css Code

Hey Guys, Welcome To Our Blog, In Today’s Blog We Are Going To See How To Create Background Slider Images 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.

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

 

HTML CODE For Background Slider Image

<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.

100+ Front-end Projects for Web developers (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.

 

CSS CODE For Background Slider Image

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.

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;
}

 

Third, We started applying our CSS properties for the background slider in which it 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;
}

 

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;} 
}

 

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 Slider Image:

Hey there, We have successfully created our Background Slider Using HTML and CSS project. 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 code with random 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

Share on:

Leave a Comment