ADVERTISEMENT

Create Background Slider Image Using Html And Css Code

Telegram Group Join Now

ADVERTISEMENT

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.

ADVERTISEMENT

ADVERTISEMENT

Create Background Slider Image Using Html And Css Code

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.

ADVERTISEMENT

Code by Grzegorz Bielski
Project Download Link Available Below
Language used HTML and CSS
External link / Dependencies NO
Responsive YES
Background Slider Image Table

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

ADVERTISEMENT

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

Play Unlimited Quiz Of HTML, CSS, and JavaScript – Click Here

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.

ADVERTISEMENT

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)

ADVERTISEMENT

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.

ADVERTISEMENT

Output:

Create Background Slider Image Using Html And Css Code

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

Responsive Navbar With Hamburger Menu Using HTML and CSS

ADVERTISEMENT

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.

ADVERTISEMENT

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.

ADVERTISEMENT

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

 

ADVERTISEMENT

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.

ADVERTISEMENT

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

Create Background Slider Image Using Html And Css Code

Create Background Slider Image Using Html And Css 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 Slider Image:

Video 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

Which code editor do you use for this Background Slider Image coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

is this project responsive or not?

Yes! this project is a responsive project.

Do you use any external links to create this project?

No!

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT