JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <!-- background -->
  <picture class="bg-image">
    <img src="https://images.pexels.com/photos/13586955/pexels-photo-13586955.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" >
  </picture>
  
  <!-- foreground -->
  <h1>Hello world!</h1>
</div>

CSS

.container {
  position: relative;
  height: 400px;
}

.container .bg-image {
  position: absolute;
  inset: 0;
}

.bg-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

h1 {
  position: relative;
  padding-top: 100px;
  text-align: center;
  color: white;
}