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
don't edit the question to say it's fixed, consider accepting the answer instead ;)
– Temani Afif
Aug 25 at 21:56
I would if your answer was the solution but I actually found it in the thread that was linked in the comment above
– Philipp K
Aug 25 at 22:50
so add your own answer here or flag your own answer as duplicate ... you don't have to add the answer to the question itself. And if both solution aren't suitable for you delete the question since it's fixed.
– Temani Afif
Aug 25 at 22:56
2 Answers
2
I would consider filter and background-attachement:fixed to achieve this:
filter
background-attachement:fixed
.section-one>div
position: relative;
z-index: 0;
.section-one>div:before
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url(https://picsum.photos/800/600?image=1069) center/cover fixed;
.two:before
filter: grayscale(100%);
.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>
I already have my background fixed, forgot to add that in my code but I will update it. The grayscale filter does not do the trick either. I think it may be because the background image is not located within the div itself but inside the parent section.
– Philipp K
Aug 25 at 21:43
Regarding changing the color to black and white, css provides a grayscale filter that may do the job for you:
img
filter:grayscale(100%);
I think this won't work since the image is not located within the div itself.
– Philipp K
Aug 25 at 21:42
It was just an example .. Replace the image with whatever you find suitable.
– Ahmed Hammad
Aug 25 at 21:43
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
possible duplicate of stackoverflow.com/questions/15757554/…
– treecon
Aug 25 at 21:42