<div class="container">
  <div class="background-img"></div>
  <div class="mix-blend-mode">
    <h2>Hi there👋<br>It's a beautiful day today!</h2>
  </div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;700&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  padding:0;
}

.container {
   position: relative;
   text-align: center;
}

.background-img {
  background-attachment: fixed;
  background-image: url(https://drive.google.com/uc?export=view&id=1VDIZg2YmeyoJaLbwhlbiAm7f_3u8bT0L);
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  opacity: .3;
  position: absolute;
  width: 100%;
}

.mix-blend-mode {
  background: #9ba3eb;
  height: 300px;
  mix-blend-mode: overlay;
  width: 100%;
}

h2 {
  color: #fff;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 3em;
  font-weight: bold;
  left: 50%;
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  width: 80%;
  z-index: 2000;
}

@media screen and (max-width: 480px) { 
h2 {
  font-size: 1.5em;
}
}