<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%);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.