JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bg">
  <div class="inside">
    <h2>
      Ponte ponente ponte pi
    </h2>
  </div>
</div>

CSS

#bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url(https://images.unsplash.com/photo-1682686580849-3e7f67df4015?ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2340&q=80);
  background-size: cover;

}

.inside {
  position: inherit;
  top: inherit;
  left: inherit;
  right: inherit;
  bottom: inherit;
  z-index: 2;
}

h2 {
  text-align: center;
  color: white;
  top: 33%;
  position: absolute;
  width: 100%;
  left: 0;
  font-family: sans-serif;
  font-size: 50px;
  mix-blend-mode: difference;
}