JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bg animate animate-bg">

</div>

CSS

html,body{
    height:100%;
    margin:0;
    padding:0;
    overflow:hidden;
}
.bg{
    background-image: url(http://digital-photography-school.com/wp-content/uploads/flickr/2746960560_8711acfc60_o.jpg);
    height: 100%;
    width: 100%;
    display: block;
    position:absolute;
    z-index: -1;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background-position: center;
    background-size: cover;
}

.animate-bg{
    -webkit-animation-name: animateBg;
    animation-name: animateBg;

}
.animate{
  -webkit-animation-duration: 5000ms;
  animation-duration: 5000ms;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;

  -webkit-animation-timing-function: cubic-bezier(.3,0,.7,1);
  timing-function: cubic-bezier(.3,0,.7,1);
}

    
@-webkit-keyframes animateBg {
  from {
    -ms-transform: scale(1,1);
    transform: scale(1,1);
    visibility: visible;
  }

  to {
    -ms-transform: scale(1.45, 1.45);
    transform: scale(1.45, 1.45) ;
  }
}

@keyframes animateBg {
  from {
    -ms-transform: scale(1,1);
    transform: scale(1,1);
    visibility: visible;
  }

  to {
    -ms-transform: scale(1.45, 1.45);
    transform: scale(1.45, 1.45);
  }
}