CODEWITHSUNDEEP
htmlcss
Philipp K
Philipp K

Reputation: 333

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

Upvotes: 0

Views: 58

Answers (2)

Ahmed Hammad
Ahmed Hammad

Reputation: 3085

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

  img{
     filter:grayscale(100%);
     }

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 272723

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>

Upvotes: 1

Related Questions