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 {
  width: 100%;
  height: 500px;
  position: relative;
}

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

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

JavaScript

We'll use jQuery for ease of use.

function cycleBackgrounds() {
  var index = 0;
  $imageEls = $('.container .slide'); // Get the images to be cycled.
  setInterval(function () {
    // 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');
  }, 2000);
};

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

Demo

View Demo