Css – Opacity and grayscale filter of background image. Making it black and white and transparent

cssgrayscaleopacity

I wanted to make my background image semi-transparent and in grayscale / black and white. I made the following code by combining codes from two different threads of Stackoverflow)

body {
    position: relative;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
body::after {
  content: "";
  background: url('<?php echo $background[0]; ?>');
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;  
    filter: grayscale(100%); /* Current draft standard */
    -webkit-filter: grayscale(100%); /* New WebKit */
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%); 
    -o-filter: grayscale(100%); /* Not yet supported in Gecko, Opera or IE */ 
    filter: url(resources.svg#desaturate); /* Gecko */
    filter: gray; /* IE */
    -webkit-filter: grayscale(1); /* Old WebKit */  
}

This is how this is working :

Chrome : working

Firefox : background image is not visible

Safari : opacity works, filter does not

IE recent version : opacity works, filter does not

Can anyone enlighten me ?

Thanks.

Best Answer

The unprefixed should be at the bottom! Also, if you don't have content on your page, you should give min-height to the body:

    html{
      height: 100%;
    }
    body {
        position: relative;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      min-height: 100%;
    }
    body::after {
      content: "";
      background: url('http://jsequeiros.com/sites/default/files/imagen-cachorro-comprimir.jpg') no-repeat center center;
      background-size:cover;
      opacity: 0.5;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      position: absolute;
      z-index: -1;  
      -webkit-filter: grayscale(1); /* Old WebKit */
      filter: grayscale(1);
    }
A Tiger!

Also, you don't need the moz, ms or o prefix as they whether support it unprefixed or don't support it at all.

Codepen: http://codepen.io/vandervals/pen/VLmbpx

Related Topic