Apply CSS effect to parent but not children

Question

I have applied an effect that I want only for a div parent but it applies also to the children.

This is my HTML code:

#wrapper {
  height: 100%;
  background-image: url("../asset/banner.jpg");
  background-attachment: fixed;
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  filter: grayscale(100%);
}

#top-wrapper {
  width: 100%;
  height: 10%;
  background-color: rgba(39, 35, 30, 0.5);
}

<div id="wrapper">
  <header id="top-wrapper" class="inline-content">
    <div id="logo" class="inline-content">
      <img src="asset/logo.svg" alt="Logo">
      <h1>portfolio</h1>
    </div>
    <nav>
      <ul id="menu" class="inline-content">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Project</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>

  <section id="banner" class="inline-content">
    <h2>Hello World!</h2>
    <h2>and I am a Web Developer</h2>
    <h3>based in London</h3>
  </section>
</div>

The logo is a multi colour logo but it appears in greyscale.

It's behaving as expected. Why don't you just save your image as grayscale? — Jon Uleis, Oct 24 '17 at 21:28
I could save the page in greyscale but I wanted to learn how to add css effect on the images — Tronpora, Oct 24 '17 at 21:31
CSS `filter` applies to the whole element (including children, so entire page in your case). You might want to try [`background-blend-mode`](https://css-tricks.com/almanac/properties/b/background-blend-mode/) instead, seems to fit your use case better. But if the point is to make the image grayscale, just save it like that – it will probably save a pretty good portion of it's data size as a bonus. — helb, Oct 24 '17 at 21:37
I see. Is there anything similar if I want to apply different effect, something like : Blur or Opacity? — Tronpora, Oct 24 '17 at 21:39
No, but you can move the image to a separate element and position it behind the others, like this: https://stackoverflow.com/questions/20411257/css-blur-on-background-image-but-not-on-content (edit: or like in @stevelacerda7's answer, which is pretty much the same thing) — helb, Oct 24 '17 at 21:41
Just for completeness – there's also [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter) (which can blur and change opacity, among other things), but it works in a different way, too – it applies to the elements behind the one with the rule applied. — helb, Oct 24 '17 at 21:54

score 0 · Answer 1 · answered Oct 24 '17 at 21:40

0

I agree with all comments: save your background as greyscale. It will save you some KBytes and it will work in IE, too. Much more impressive than using a CSS rule that IE doesn't care about ;-)

answered Oct 24 '17 at 21:40

Oliver Baumann

2,209
1
10
26

score 0 · Accepted Answer · answered Oct 24 '17 at 21:43

Insert an additional div and just position it absolute:

<div id="wrapper">
    <div id="test" style="
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: url(banner.jpg);
    background-attachment: fixed;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    filter: grayscale(100%);
    z-index: -2;
"></div>
      <header id="top-wrapper" class="inline-content">
        <div id="logo" class="inline-content">
          <img src="logo.svg" alt="Logo">
          <h1>Tuffi portfolio</h1>
        </div>
        <nav>
          <ul id="menu" class="inline-content">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Project</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </nav>
      </header>

      <section id="banner" class="inline-content">
        <h2>Hello World!</h2>
        <h1>I am Tuffi</h1>
        <h2>and I am a Web Developer</h2>
        <h3>based in London</h3>
      </section>
    </div>

Obviously, remove everything from #wrapper except the height of 100%.

is this a good practice or a bad practice? I mean applying effect using css — Tronpora, Oct 24 '17 at 21:58
It does work, I just tried it on your existing site. Create a jsfiddle and I'll make it work for you. As for bad practice, no, it's not bad practice. Usually you'll want to use greyscale if it has some sort of effect. Like you hover over it, which then transitions into a color image. You'll save size by using a greyscale image. — stevenlacerda, Oct 24 '17 at 22:08

Apply CSS effect to parent but not children

2 Answers2