Easy Background Image Slideshow

Need to have a container change a background automatically?

I didn't know you can not use transitions with background-image on a single container. It will give you lots of troubles on different browsers.
What you can do is use opacity transitions with multiple containers.

HTML

You can modify this to fit your needs. In my case I wanted the images to behave as background, under my content.

<div class="container">
  <div class="content">We could have anything here</div>
  <div class="slide show" style="background-image: url('image-1.jpg');"></div>
  <div class="slide" style="background-image: url('image-2.jpg');"></div>
  <div class="slide" style="background-image: url('image-3.jpg');"></div>
</div>

CSS

The basic CSS below. In my demo I've added extra CSS to position another container inside it. So I can have the slides as background under the content.

.container {
  height: 500px; /* It can be anything you need */
  position: relative;
  width: 100%;
}

.container .slide {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: opacity 1s ease-in-out;
  width: 100%;
  z-index: 1;
}

.container .slide.show {
  opacity: 1;
}

JavaScript

We'll use jQuery for ease of use. Let's first include that

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 

Now our function, which does the rotation magic:

/**
 * @param  {number} interval (in milliseconds)
 */
function cycleBackgrounds(interval) {
  let index = 0

  const $imageEls = $('.container .slide') // Get the images to be cycled.

  setInterval(() => {
    // Get the next index.  If at end, restart to the beginning.
    index = index + 1 < $imageEls.length ? index + 1 : 0

    // Show the next
    $imageEls.eq(index).addClass('show')

    // Hide the previous
    $imageEls.eq(index - 1).removeClass('show')
  }, interval)
}

Wait until the page has loaded to fire the function.

// Document Ready.
$(function () {
  cycleBackgrounds(2000);
});

Demo

View Demo