title: Crossbrowser brightness filter over img using css
body: <p>I need to use a full size picture as background and I need that picture to have a brightness filter.</p>
  
  <p>Right now it is only working on <code>Chrome</code> and <code>Firefox</code>, the last one using svg.</p>
  
  <p>This is what I have:</p>
  
  <pre><code>img.fullscreenIMG 
  {
     display:block;
     position:absolute;
     z-index:1;
     filter: url("data:image/svg+xml;utf8,&lt;svg xmlns='http://www.w3.org/2000/svg' &gt;&lt;filter id='bright30'&gt;&lt;feComponentTransfer&gt;&lt;feFuncR type='linear' slope='0.30'/&gt;&lt;feFuncG type='linear' slope='0.30' /&gt;&lt;feFuncB type='linear' slope='0.30' /&gt;&lt;/feComponentTransfer&gt;&lt;/filter&gt;&lt;/svg&gt;#bright30");
     filter: brightness(0.6);
      -webkit-filter: brightness(0.6);
      -moz-filter: brightness(0.6);
      -o-filter: brightness(0.6);
      -ms-filter: brightness(0.6);
  }
  </code></pre>
  
  <p>Safari 5.1.7 for <code>Windows</code> doesn't work with this, neither <code>Internet Explorer 11.</code> </p>
  
  <p>What am I missing? Can you recommend me any other way to accomplish the same?</p>
  
  <p>Thanks</p>