.lazyload-bg,
.lazyload-bg::before,
.lazyload-bg::after {
  background-image: none !important;
}

.tigers {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tigers div {
  height: 400px;
  background-repeat: no-repeat;
  background-size: cover;
}

.tiger-1 {
  background-image: url('https://cdn.pixabay.com/photo/2017/01/12/21/42/tiger-1975790_960_720.jpg')
}

.tiger-2 {
  background-image: url('https://cdn.pixabay.com/photo/2016/11/29/10/07/tiger-1868911_960_720.jpg')
}

.tiger-3 {
  background-image: url('https://cdn.pixabay.com/photo/2018/03/26/20/49/tiger-3264048_960_720.jpg')
}

.tiger-4 {
  background-image: url('https://cdn.pixabay.com/photo/2016/11/14/03/56/tiger-1822537_960_720.jpg')
}

.tiger-5 {
  background-image: url('https://cdn.pixabay.com/photo/2017/07/24/19/57/tiger-2535888_960_720.jpg')
}

.tiger-6 {
  background-image: url('https://cdn.pixabay.com/photo/2017/07/22/22/56/tiger-2530158_960_720.jpg')
}

.tiger-7 {
  background-image: url('https://cdn.pixabay.com/photo/2015/01/07/11/31/tigers-591359_960_720.jpg')
}

document.addEventListener('DOMContentLoaded', function() {
   var lazyBackgrounds = [].slice.call(document.querySelectorAll('.lazyload-bg'));

   if ('IntersectionObserver' in window) {
      let lazyBackgroundObserver = new IntersectionObserver(function(entries, observer) {
         entries.forEach(function(entry) {
            if (entry.isIntersecting) {
               entry.target.classList.remove('lazyload-bg');
               lazyBackgroundObserver.unobserve(entry.target);
            }
         });
      });

      lazyBackgrounds.forEach(function(lazyBackground) {
         lazyBackgroundObserver.observe(lazyBackground);
      });
   }
});