How to make a grayscale without effect overlay text? HTML CSS

Question

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>
                <a href="*" class="storeButton">Shop</a>
            </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.

Yash porwal · Accepted Answer · 2023-02-04T15:38:58.930

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

score 0 · Answer 2 · answered Feb 04 '23 at 15:08

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>
            <a href="*" class="storeButton">Shop</a>
        </div>
    </div>

How to make a grayscale without effect overlay text? HTML CSS

2 Answers2