How to create a background slider [download template]

The background slider is very useful when you want to create a hero section on your web page. You can create a slider with background images in many different ways. Such as using slider plugins, jQuery libraries, frameworks, etc.

However, in this post, I will show you how to create a background slider only using HTML, CSS & JavaScript. To create this slider, I did not use any dependencies. So you do not need any plugins, JavaScript libraries, or any help from 3rd party sources.

See the live preview of the slider in the link below. End of this post, I will also give the source code. You can download the slider template and use it on your own projects very easily.

How to create a perfect background slider?

A background slider shows a couple of things and it helps you to showcase multiple things at a time. Here I will explain what a good background slider looks like and what things you should pay attention to.

Background images for the slider

The background images are the very important parts of your slider. Because each of them tells a story (if you choose them correctly). So take some time to create or find the correct images that suit your story.

Another important thing is to crop the images in equal proportions. For example, you have 3 images for 3 slides. Make sure you cropped all the 3 images in the same proportion. Otherwise, your slider may look awkward.

Lastly, make sure each of the background images covers the full available width. And you can do it with CSS as you see below.

background-size: cover;

To wrap up, there are two main things you need to pay attention to:

1. Select the right images for each slide
2. Crop them in the same proportion

Overlay color of the slider backgrounds

You should not write the text just above the slider images. This may not look good to human eyes. Even the text may be visible properly or hard to look at. Because some parts of the images may mess up with the text color.

So make sure to use an overlay color on top of the background images. And your text will sit on top of the overlay color. However, the overlay color should not be very strong and not more than 0.45 (transparency). Otherwise, the slider images may not focus correctly.

To wrap up, below is the serial of the layers:

1. Background image
2. Overlay color
3. Text

Use the opposite text color than the overlay

As mentioned in the last section, the slider text sits on top of the overlay color. To focus your slider texts clearly, try to use the opposite text color than the overlay.

For example, if you choose a black overlay, then you should use white as the text color. If you used green overlay as the overlay, use red as the text color. And so on and so forth.

It does not necessarily have to exact match (color code). However, they should be something similar (blackish vs whitish, greenish vs reddish, etc).

Protip: Use a slightly transparent color for the texts to make the slider stand out. Such as RGBA (255, 255, 255, 0.85).

To wrap up,

1. Choose the opposite text color than the overlay
2. Try to use a slightly transparent color such as 0.85 or 0.9

Do not make slides auto-scroll

This is a very bad user experience that I have seen many times. You should never make auto-scrollable sliders.

This is just because you’re making a background slider and not a carousel.

Your website visitors may need to take a shorter or longer time than the auto scroll duration. Imagine if a slide changed when someone reading or watching it. How bad is that!

Add next & previous links or arrows

We don’t want an auto-scroll background slider. But how the visitors can change the slides? And this is where the next-previous links come into play.

If someone wishes to see the next slide, they can change it. If they wish to go back, they also have the option.

Mobile responsiveness of the slider

Mobile responsiveness is very important for your slider. Make sure the width, height & font size automatically adapts to the mobile screen size.

If you use a large font on a desktop, then you need the reduce the font size on mobile. Otherwise, the whole slider will look distorted.

If you have different amounts of text on each slide, the slider height may fluctuate especially on mobile. So be sure to switch back and forth between the slides and see if that happens. If it does, fixed it right away.

This is how you can create a perfect background slider that will clearly tell the story and your visitors will like it (mostly). These are the by far most user-friendly options for a background slider that will serve your purpose.

How you can download my background slider template

I have created a background slider maintaining all these best practices. If you want to use my template, you can download it from my GitHub repository.

After you download it, you will get a zip file. Once you extract it, you will get a project folder named “backgroundslider.” It contains a couple of files but you only need the “index.html, style.css, script.js” and the “img” folder that contains the background images. The “style.css” file lives in a folder called “sass.” However, it’s not mandatory to use sass but I included it because some of you may want to use it.

For any difficulties or confusion, feel free to reach out to me at any time.

However, if you’re a total beginner, you can copy & paste the code from below. But make sure you created an “img” folder in your project. And you have three images with the exact name as mine: “slide-1.jpg, slide-2.jpg & slide-3.jpg”

HTML

<div class="slideshow-container">
  <div class="mySlides fade bg1">
    <h3 class="text">Aspernatur consectetur quisquam</h3>
  </div> <!-- .mySlides -->

  <div class="mySlides fade bg2">
    <h3 class="text">Debipisicing laboriosam deserunt</h3>
  </div> <!-- .mySlides -->

  <div class="mySlides fade bg3">
    <h3 class="text">Consectetur voluptates suscipit</h3>
  </div> <!-- .mySlides -->
  
  <a class="prev" onclick="plusSlides(-1)">❮</a>
  <a class="next" onclick="plusSlides(1)">❯</a>

</div> <!-- .slideshow-container -->

CSS

.slideshow-container {
  position: relative;
  margin: auto;
  padding: 0;
  /* Next & previous buttons */
}

.slideshow-container .mySlides {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 400px;
  display: none;
  padding: 30px 10px;
}

@media (min-width: 768px) {
  .slideshow-container .mySlides {
    min-height: 370px;
  }
}

@media (min-width: 768px) {
  .slideshow-container .mySlides {
    padding: 45px 35px;
  }
}

.slideshow-container .mySlides .text {
  text-align: center;
  color: rgba(255, 255, 255, 0.95);
  font-size: 30px;
  padding: 0 20px;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .slideshow-container .mySlides .text {
    font-size: 3.225rem;
  }
}

.slideshow-container .bg1 {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.25))), url("../img/slide-1.jpg");
  background-image: linear-gradient(rgba(0, 0, 0, 0.25)), url("../img/slide-1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.slideshow-container .bg2 {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.45))), url("../img/slide-2.jpg");
  background-image: linear-gradient(rgba(0, 0, 0, 0.45)), url("../img/slide-2.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.slideshow-container .bg3 {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.25))), url("../img/slide-3.jpg");
  background-image: linear-gradient(rgba(0, 0, 0, 0.25)), url("../img/slide-3.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.slideshow-container .prev, .slideshow-container .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  -webkit-transition: 0.6s ease;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.slideshow-container .next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.slideshow-container .prev:hover, .slideshow-container .next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
          animation-name: fade;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {
    opacity: .4;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade {
  from {
    opacity: .4;
  }
  to {
    opacity: 1;
  }
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next {
    font-size: 11px;
  }
}

JavaScript

let slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("mySlides");

  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slides[slideIndex-1].style.display = "flex";
}

And it brings me to the end of this post.

Learn more about CSS backgrounds

• CSS background color, background & their differences
• Gradient background color
• Animated background examples
• Background image size (full-width, responsive, full-screen, etc)
• Video background
• How to add background color & background image to an HTML table?
• How to create a background slider

Build HTML CSS projects

Conclusion

Know you know how to create a background slider properly. You also knew what specific things need to keep in mind while creating it. Finally, you got a downloadable template that has been created maintaining all these best practices. Therefore, if you still have any questions, let me know.