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