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