0

I am going to add filter to background image. And I am confused about how to add the filter effect to background image.

Here is the code,

body {    
     background-image:url(../images/background.jpg);
     background-repeat: no-repeat;
     background-size:cover;
 }

 body, html {
     min-height:100%;
 }

I try to add filters: brightness(2);inside the body, but nothing happen... What i want to do is that keep the full-size background and then add the filter effect to the background image. Anyone can help?

Millions thanks!!!!!!!

noahh
  • 21
  • 2
  • 1
    @Quentin: I am not sure if the linked question completely answers this one. While prefixes are one thing, applying the `filter` just to background image alone won't happen. As far as I can remember, it will get applied to content also. Anyway, will wait for OP to clarify. – Harry Nov 15 '15 at 13:50
  • 1
    The basic problem here is that the OP has two separate questions, but put them into a single stackoverflow question, and the first one is a duplicate. The second question should be asked separately. – Quentin Nov 15 '15 at 13:59
  • Oh I see. Sorry @Quentin, I hadn't noticed the edit history. You are correct. – Harry Nov 15 '15 at 14:02
  • @Harry: Here i have an example, without affecting the content http://codepen.io/damianocel/pen/MaZPBz – damiano celent Nov 15 '15 at 15:07
  • @damianocelent: In latest Chrome (dev version) it still causes a bit of blur to content but that is negligible. However the point was you can't just apply the filter on `body` alone and have it not affect the content. – Harry Nov 15 '15 at 15:34
  • 1
    @Harry: Yes, agreed, this cannot be applied to the body, on top of that, even though it works on mobile, you can tell the mobiles CPUs are suffering on load and any repaint, esp if the blur value is animated. Worst css filter function imo.But nicest as well:-) – damiano celent Nov 15 '15 at 15:40

0 Answers0