<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;
}
}