Opacity for only a part of background image - CSS - css

Question

Do you maybe know how (and if) I can add an opacity for the background image but only to PART of it?
The effect should be like this one: https://i.stack.imgur.com/HYvaU.png.
I have only added the image as a background but I cannot find any solution for this oppacity.
My HTML:
<header>
<img src="images/logo.svg" />
<h1>A history of everything you copy</h1>
<p>
Clipboard allows you to track and organize everything you copy.
Instantly access your clipboard on all your devices.
</p>
</header>
And CSS:
body {
font-family: "Bai Jamjuree", sans-serif;
text-align: center;
}
#media (min-width: 1200px) {
header {
width: 100%;
background-image: url(images/bg-header-desktop.png);
background-size: 100%;
background-repeat: no-repeat;
padding-top: 50px 150px;
}
}
h1 {
color: hsl(210, 10%, 33%);
font-size: 35px;
margin-bottom: 15px;
}
header > p {
color: hsl(201, 11%, 66%);
font-size: 18px;
}
Thank you in advance!
I have tried to use mask-image but it didn't work:
#media (min-width: 1200px) {
header {
width: 100%;
background-image: url(images/bg-header-desktop.png);
mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1), transparent 74%);
background-size: 100%;
background-repeat: no-repeat;
padding-top: 50px 150px;
}
}
Do you have maybe any idea if I can give an opacity only for the bottom part of this background image using CSS?

Answer 1

With more than 1 background, you can put image in 1 and opacity on the other.
You can change 2nd background color as you want. It's opacity value is given by the RGBA background color (here 0.75 in the snippet).
body {
margin: 0;
padding: 0;
}
.wrapper {
position: absolute;
width: 100vw;
height: 50vh;
top: 50%;
transform: translateY(-50%);
font-size: 10em;
font-weight: bold;
font-family: sans-serif;
background: url("https://picsum.photos/id/22/1280/600");
}
.wrapper1 {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
clip-path: inset(50% 0 0 0);
background-color: rgba(255, 255, 255, 0.75);
display: flex;
justify-content: center;
align-items: center;
}
.wrapper2 {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
}
<div class="wrapper">
<div class="wrapper1"></div>
<div class="wrapper2">Hello World!</div>
</div>
Look at the snipper in full scree, for this demo I put width 100vw, so in small result is "strange"