Background Image Rotation

by Adrian Mejias

HTML

<div class="body-tag home"></div>

CSS

.body-tag {
  min-height: 781px;
  background-image: none;
  background-image: url(https://homestate.staging.wpengine.com/wp-content/themes/workhorse-boilerplate/_images/original/Background%20TEST,%20Twitter%20HOMESTATE%20copy.jpg);
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.body-tag div {
  color: #fff;
  padding: 6px;
  background: rgba(0, 0, 0, .75);
  width: 100%;
}

.home {
  background-image: url(https://homestate.staging.wpengine.com/wp-content/themes/workhorse-boilerplate/_images/original/HomeState-storefront.jpg) !important;
  height: 100% !important;
  overflow: hidden !important;
}

.home-alt {
  background-image: url(https://via.placeholder.com/2353x1569) !important;
}

JavaScript

var bgHome = {
  rotation: false,
  interval: 5 // seconds
};
bgHome.interval = 5;
bgHome.rotation = window.setInterval(function() {
  $('.body-tag.home').toggleClass('home-alt');
}, bgHome.interval * 1000);
/* window.clearInterval(bgHome.rotation); */