JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bg2">
  <div id="ad_container2"></div>
</div>

CSS

#bg2 {
  width: 728px;
  height: 300px;
  margin-top: 40px;
  background-color: #0c74b9;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

#ad_container2 {
  position: absolute;
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  opacity: 0;
}

JavaScript

const element = document.querySelector("#ad_container2");
function displayAd2() {
  setTimeout(() => {
  
 		element.style.transition = "2s ease-in-out";
  	element.style.backgroundImage = "url('http://via.placeholder.com/250')";
    element.style.opacity = "1";
    
    setTimeout(() => {
    
      element.style.backgroundImage = "url('https://cdn.pixabay.com/photo/2017/0	8/30/01/05/milky-way-2695569_960_720.jpg')";
      element.style.opacity = "1";
      element.style.transition = "none";
      
      setTimeout(() => {
      
        element.style.transition = "none";
        element.style.backgroundImage = "url('http://via.placeholder.com/150')";
        element.style.opacity = "1";
        
        setTimeout(() => {
          displayAd2();
        }, 2000);
      }, 2000);
    }, 2000);
  }, 0);
}

displayAd2();