Make a background image B/W inside one div
Make a background image B/W inside one div I'm trying to achieve an effect where I have a fixed background image and I have two divs laying over it. Is it possible to write CSS in a way that the image remains in it original state within the one div, while it displays black and white within the other div? This would make a cool scrolling effect that I am trying to achieve. .section-one background-image: url(https://cdn.pixabay.com/photo/2018/08/19/19/56/peacock-feathers-3617474_960_720.jpg) background-attachment: fixed; background-size: cover; .one padding: 50px 0; border-bottom: 3px solid white; color: white; text-align: center; .two padding: 50px 0; color: white; text-align: center; <section class="section-one"> <div class="one"> <h1>Content One</h1> </div> <div class="two"> <h1>Content Two</h1> </div> </section> Thanks for any help on this possible duplicate of stackov