Make a background image B/W inside one div

Question

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 https://stackoverflow.com/questions/15757554/apply-grayscale-filter-to-div — treecon, Aug 25 '18 at 21:42
don't edit the question to say it's fixed, consider accepting the answer instead ;) — Temani Afif, Aug 25 '18 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 '18 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 '18 at 22:56

score 1 · Answer 1 · answered Aug 25 '18 at 21:34

I would consider filter and background-attachement:fixed to achieve this:

.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 '18 at 21:43

score 0 · Answer 2 · answered Aug 25 '18 at 21:39

0

Regarding changing the color to black and white, css provides a grayscale filter that may do the job for you:

  img{
     filter:grayscale(100%);
     }

answered Aug 25 '18 at 21:39

Ahmed Hammad

2,798
4
18
35

I think this won't work since the image is not located within the div itself. – Philipp K Aug 25 '18 at 21:42
It was just an example .. Replace the image with whatever you find suitable. – Ahmed Hammad Aug 25 '18 at 21:43

Make a background image B/W inside one div

2 Answers2