I was looking to create a semi-transparent and grayscale / black and white background image, so I put together the following code by combining snippets from different discussions on 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 it's functioning:
Chrome: working
Firefox: background image not visible
Safari: opacity works, but filter does not
Recent versions of IE: opacity works, filter does not
Any insights on this issue would be greatly appreciated.
Thank you.