How to make a grayscale without effect overlay text? HTML CSS [duplicate] - html

Question

This question already has answers here:
How to apply a CSS filter to a background image
(22 answers)
Closed 16 days ago.
I am new to this type of code and wanted to grayscale the background image without effecting the overlay text
HTML CODE
<div class="top">
<div class="titleMain">
<div class="titleMainText">
<h1>Check out our Store</h1>
</div>
Shop
</div>
</div>
CSS CODE
.top {
padding-bottom: 500px;
padding-top: 50px;
border-bottom: 10px solid;
background-image: url('../Images/46162.webp');
background-repeat: no-repeat;
background-size: cover;
}
.titleMain {
margin-left: 5%;
margin-right: 70%;
margin-top: 5%;
padding-bottom: 40px;
font-size: xx-large;
filter: none;
}
.titleMainText {
margin-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
font-weight: bolder;
color: black;
}
I wanted to grayscale the background image without effecting the text infront but can't find anything about it.

Answer 1

you can use the filter property to make your background grayscale and use before pseudo before property to apply grayscale without affecting
overlay text.
Just add filter property to the below class in your CSS:
.top {
position: relative;
padding-bottom: 500px;
padding-top: 50px;
border-bottom: 10px solid;
}
.top::before{
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
filter: grayscale(100%);
background-image: url('../Images/46162.webp');
background-repeat: no-repeat;
background-size: cover;
z-index: -1;
}

Answer 2

Try this:
.top {
padding-bottom: 500px;
padding-top: 50px;
border-bottom: 10px solid;
background-image: linear-gradient(black, white),url('https://lumiere-a.akamaihd.net/v1/images/sa_pixar_virtualbg_coco_16x9_9ccd7110.jpeg?region=0,0,1920,1080&width=1200');
background-repeat: no-repeat;
background-size: cover;
background-blend-mode: saturation;
}
.titleMain {
margin-left: 5%;
margin-right: 70%;
margin-top: 5%;
padding-bottom: 40px;
font-size: xx-large;
filter: none;
}
.titleMainText {
margin-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
font-weight: bolder;
color: black;
}
<div class="top">
<div class="titleMain">
<div class="titleMainText">
<h1>Check out our Store</h1>
</div>
Shop
</div>
</div>