JSFiddle - React, Tailwind, and code Playground

by Vince

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.min.js"></script>
<header>
  
</header>

SCSS

html,body {margin:0;padding:0;}
header {
  display: block;
  height: 500px;
  background-color: #EEE;
  
  $img1: 'https://ccp.blob.core.windows.net/web/public-web/the-ones/20190301/images/2022/02-february/food-delivery-startups/test-images/hero1.png';
  $img2: 'https://ccp.blob.core.windows.net/web/public-web/the-ones/20190301/images/2022/02-february/food-delivery-startups/test-images/hero2.png';
  
  --img-1-position: center center;
  --img-2-position: center center;
  
  --img-1-size: cover;
  --img-2-size: auto 100%;
  
  background-repeat: 
    no-repeat, 
    no-repeat;
  background-image: 
    url(#{$img2}), 
    url(#{$img1});
  background-size: 
    var(--img-1-size), 
    var(--img-2-size);
  background-position: 
    var(--img-1-position), 
    var(--img-2-position);
}