I'm trying to make a div with background-image grayscale, using method described here: Greyscale Background Css Images
My HTML:
<div class="entry box post" style="background-image: url(../img/some-image.jpg);"></div>
My SCSS:
.box {
width: 100%;
position: relative;
border-left: solid 1px rgba(255, 255, 255, 0);
border-right: solid 1px rgba(255, 255, 255, 0);
}
.entry.box.post {
background: url(../img/blog_example.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: 105%;
-moz-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
-o-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(100%);
filter: gray;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
}
The divs are having inline style set by php.
On Mac Firefox and Chrome this is ok, but on IE 10-11 (VirtualBox), the method is not working. I've also tried couple of libraries, and nothing seems to make those boxes black and white.
Does anybody have idea, what I might be missing here?