JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="background"></div>
  <div class="background"></div>
  <button>
    Test button
  </button>
</div>

CSS

.container { position: relative; line-height: 100px; }
  .container > .background,
  .container > .background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-size: contain; z-index: 0; }
  
  .container > *:not(.background) { position: relative; z-index: 1; }

JavaScript

var bg=[
        'https://i.kinja-img.com/gawker-media/image/upload/s--pEKSmwzm--/c_scale,fl_progressive,q_80,w_800/1414228815325188681.jpg',
        'https://upload.wikimedia.org/wikipedia/commons/thumb/a/ad/Yahoo_Logo.svg/2000px-Yahoo_Logo.svg.png',
        'http://www.freelargeimages.com/wp-content/uploads/2015/05/Twitter_Logo_Hd_Png_06.jpg'
       ];
var Transition = 1000;

$('.background').css('background-image','url('+bg[bg.length - 1]+')');
window.setInterval(
  function() {
    img=bg.shift();
    bg.push(img);
    
    var $Backgrounds = $('.background');
		$Backgrounds.eq(1).hide(0).css({
    	'background-image': 'url('+img+')'
    }).fadeIn(Transition * .9);
    
    $Backgrounds.eq(0).show(0).fadeOut(Transition, function(){
    	$(this).show(0).css({
      	'background-image': 'url('+img+')'
      });
      $Backgrounds.eq(1).hide(0);
    });
  }, 2000
);