JSFiddle - React, Tailwind, and code Playground

by kodjoe mambi

HTML

<div class="middle">

<div class="middle-first">
</div>

</div>

CSS

.middle {
 position: relative;
  display: inline-block;
  width: 100%;
  height: 400px;
  background-size: auto!important;
  margin: 20px auto 0px auto;
  text-align: center;
  max-width: 90%;
  max-height: 90%;
  background-image: url("https://res2.yourwebsite.life/res/5eaf48a4da467d0022126577/6164cbe41423f00026256518_optimized_1467");
  background-repeat: no-repeat;
  background-position:center center;
  background-size: auto;
}

.middle-first {
  position: relative;
  display: inline-block;
  width: 100%;
height: 400px;
background-size: auto!important;
  max-width: 90%;
  max-height: 90%;
  text-align: center;
  margin: 20px auto 0px auto;
background-image: url(https://www.htmlgoodies.com/wp-content/uploads/2021/04/CSS-Gradients-fig4.png);
background-repeat: no-repeat;
background-position:center center;
background-size: auto;
}