JSFiddle - React, Tailwind, and code Playground

by Jim_Toth

HTML

<div id="wrap">
<div id="bkg"></div>
</div>

CSS

*{padding: 0; margin:0;}

#wrap {
  height: 100vh;
  max-width:100%;
  width: 100vw;
  overflow: hiddin;
}

#bkg {
  width: 100%;
  height: 100%;
  background-position: 50% 50%;
  background-image: url("https://s1.1zoom.me/big7/733/Sunrises_and_sunsets_USA_Lake_Scenery_Chocorua_565049_1920x1219.jpg");
  background-size: cover;
  animation: animate 90s forwards;
  overflow: hidden;
}

@keyframes animate {
  0%   { transform: scale(1); }
  100% { transform: scale(1.5) translateY(-10%);}
}