0

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?

Community
  • 1
  • 1
Jaakko Karhu
  • 2,030
  • 1
  • 23
  • 38
  • Apparently trying to do this via pure CSS is impossible in IE10/11. There's a way to do it via JS+CSS though: http://www.majas-lapu-izstrade.lv/cross-browser-grayscale-ie11/ (basically - go pixel by pixel through image and create desaturated SVG canvas). Here's a bit "cleaner" solution: https://github.com/kununu/gray – eithed Jul 22 '14 at 23:14
  • @eithedog I tried both of those JS methods and couldn't get it working. Maybe I didn't try hard enough, I'll give it another shot today. – Jaakko Karhu Jul 23 '14 at 07:31
  • Please find attached fiddle: http://jsfiddle.net/YKaWP/ (you might need to click "Run" to trigger the onload event that should happen) – eithed Jul 23 '14 at 18:18
  • @eithedog I got Kununu's library working... kinda. There is couple of strange glitches on IE11: - If background-repeat is not set to no-repeat, only the first background-image is affected - If I keep hitting refresh on IE11 it doesn't take effect always, it's like it runs too soon - Div's are also stacked in a weird way considering I didn't put any float etc. values to them Here is my fiddle: http://jsfiddle.net/jaakkokarhu/3pHwE/4/ – Jaakko Karhu Jul 23 '14 at 21:03
  • 1. Looking at the source of the library I can see that the image size is being taken from the css, `background-size` property. Unfortunately playing around with it I can't make it to repeat. Definitely SVG width/height calculation is at fault here, as if you'll inspect it in console, it stays at the size of your original image. I guess the solution here should be - use the dimensions from CSS if `repeat` is on `no-repeat`, otherwise use image dimensions, but that would require altering the library (if you want to do that) – eithed Jul 23 '14 at 21:32
  • 2. adding `document.ready` fixes that (at least on my machine) 3. adding `div.container {display: block !important}` fixes that. 4. Let's see if there's any other JS solutions out there, as I've seen that unfortunately plain CSS will not work – eithed Jul 23 '14 at 21:33
  • Thank you for your assistance! 2. I tried that and window.load too, for some reason bug stays I found more bugs: 5. The real purpose of this is my WP site, and there at first I didn't get it work at all. Then I noticed getting "Unable to get property '0' of undefined or null reference" on line 94. That line handles x y with backround-position. I have "background-position: center" there, so probably that's the reason, haven't tried yet. Giving numeric values for x and y on library works as well. 6. The grayscale image is drawn on top of div content. I need more layers... – Jaakko Karhu Jul 23 '14 at 22:34

0 Answers0