<div class="example">
  <img  class="background-image" src="https://ik.imagekit.io/fvilrnl1zve/hero.png?tr=w-1200,h-300">
  <div class="overlay-text">
    <h1>Welcome to our Blog</h1>
  </div>
</div>

.example{
  position: relative;
}

.overlay-text{
  background-color:rgba(255, 255, 255, 0.5);
  padding:20px;
  text-align:center;
  position: absolute;
  top:50%;
  right:50%;
  transform:translate(50%, -50%);
}