[Pseudo] fallback for background-blend-mode in IE

As for now IE browser don't support CSS property background-blend-mode. But in simple cases (when we use blend mode multiply for toning background images with one color) we can use multiple background images for emulate blending.

The idea of fallback is simple:

• we prepare PNG image with alpha channel with color we need (with help of level of transparency in PGN we control level of final "blending", i.e. PNG with 25% of transparency will tint our background slightly, and 75% tint background greatly;
• size of PNG must be the same of size of
  where we use our fallback, or we can adjust size via CSS;
• then with help of JS or jQuery detect IE browser (I use function detectIE());
• if browser is IE we read URL of current image in CSS property background-image in;
• then we create string with two URLs, first for our transparent PNG, second for picture, that was used as background image in
  (our PNG must be first in list, otherwise it'll be lied under original background);
• write back this list to CSS property background-image.

And voila! IE placed our PNG over background, and we have some "blending".

In example below instead URL for PNG with transparency I used base64 encoded image, embedded right into JS.  Open this example in IE and Chrome for see the change in end result.

See the Pen [Pseudo] fallback for background-blend-mode in IE by borshak (@borshak) on CodePen.

P.S. Краткий перевод на русский - в браузере IE можно имитировать CSS-свойство background-blend-mode, добавляя в список фоновых картинок (первым в списке) полупрозрачный PNG с заливкой нужного цвета для тонировки основной фоновой картинки. Подробности смотрите в коде примера.