0

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.

Improve this question
6
  • It's behaving as expected. Why don't you just save your image as grayscale? Commented Oct 24, 2017 at 21:28
  • I could save the page in greyscale but I wanted to learn how to add css effect on the images Commented Oct 24, 2017 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 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. Commented Oct 24, 2017 at 21:37
  • I see. Is there anything similar if I want to apply different effect, something like : Blur or Opacity? Commented Oct 24, 2017 at 21:39
  • No, but you can move the image to a separate element and position it behind the others, like this: stackoverflow.com/questions/20411257/… (edit: or like in @stevelacerda7's answer, which is pretty much the same thing) Commented Oct 24, 2017 at 21:41

2 Answers 2

Reset to default
0

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%.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

is this a good practice or a bad practice? I mean applying effect using css
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.
Oh I see, thank you for your support. Much appreciated!
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 ;-)

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.