how do i make the background image of my website grayscale without affecting the child elements in css

Question

i want to make the background colour of my website black and white without making the texts or icons on it black and white in css

i added the filter property to the class name style which contained the background image and set greyscale to 100%, i expected only the image to be black and white but both the image and texts on the screen are black and white because the texts are also in a div element inside the div element with the class attribute. This is the code:

    <div class="home-page">
               <div>
                    We Are Increasing  <br>Business Success With <br> IT Solution
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.Veritatis in quam,</p>
                    <a href="#">Read More</a>
               </div>
     </div>

This is the styling:

 ` <div class="home-page">
               <div>
                    We Are Increasing  <br>Business Success With <br> IT Solution
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.Veritatis in quam,</p>
                    <a href="#">Read More</a>
               </div>
     </div>`

this didn't work

all the child element on the background are also changing to grayscale