<div class="example">
  <div class="overlay-text">
    <h1>Welcome to our Blog</h1>
  </div>
</div>
.example{
   position:relative;
  height: 300px;
    width: 100%;
    color: white;
    background: linear-gradient(rgb(42,0,42,0.8), rgb(142,42,72,0.8)), url("https://ik.imagekit.io/fvilrnl1zve/hero.png"); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background-size: cover;
    background-repeat: no-repeat;
}


.overlay-text{
  text-align:center;
  position: absolute;
  top:50%;
  right:50%;
  transform:translate(50%, -50%);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.