<div class="hero">
  <h1>I'm a super hero</h1>
</div>

.hero {
  aspect-ratio: 16 / 9; 
  
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("https://picsum.photos/1600/900"), linear-gradient(#151321, #2c2a44);
  background-blend-mode: overlay;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;  
  font-size: 4vw;
}



h1 {
  padding: 16px 32px;    
  font-weight: normal;
  font-family: 'Squada One', cursive;
  color: #fff;  
  background-color: rgba(255, 255, 255, .1);
  backdrop-filter: blur(5px);  
}