Simple Responsive Background Image Cycler With jQuery

A simple, responsive, fullscreen jQuery slideshow plugin that rotates the images with a z-index behind the page content to give the appearance of a background image.

How to use it:

1. Add your images as backgrounds to the DIV containers following the markup structure like this:

<div id="background_cycler" >
  <div class="img active" style="background:url('1.jpg') top left no-repeat; background-size:cover;"></div>
  <div class="img" style="background:url('2.jpg') top left no-repeat; background-size:cover;"></div>
  <div class="img" style="background:url('3.jpg') top left no-repeat; background-size:cover;"></div>
  <div class="img" style="background:url('4.jpg') top left no-repeat; background-size:cover;"></div>
  <div class="img" style="background:url('5.jpg') top left no-repeat; background-size:cover;"></div>
</div>

2. The required CSS styles for the background slideshow.

#background_cycler {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

#background_cycler .img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

#background_cycler .img.active { z-index: 3; }

3. Include jQuery library and the jQuery slideshow.js script on the webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/slideshow.js"></script>

4. The JavaScript to hide the background while the images have been loaded, ready to fade in later.

$('#background_cycler').hide();

---

This awesome jQuery plugin is developed by k0lt4y. For more Advanced Usages, please check the demo page or visit the official website.