3

I have a div and i just want the external image to be tinted blue. This code is working fine in all browsers but IE Edge and previous.

One thing is i need to solve this with css, im response.writing this html out dynamically. Here is the current working code

.section-2 {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-color: #54b3ea;
background-blend-mode: multiply;
height:375px;

}

 //fyi the url is found dynamically
<div class="col-sm-24 col-md-12 section-2" style="background-image: url('https://external.xx.fbcdn.net/safe_image.php?d=AQD0jbn3FeE4TUol&url=http%3A%2F%2Fgoodnewsshared.com%2Fwp-content%2Fuploads%2F2016%2F10%2Frsz_shitima_markit_2.jpg');">
</div>

here is working jsfiddle(all but internet explorer edge or lower)

http://jsfiddle.net/dQy8A/31/

Michael Rudner Evanchik
  • 867
  • 1
  • 8
  • 19
  • Possible duplicate of [Blend mode:multiply in Internet Explorer](http://stackoverflow.com/questions/25158696/blend-modemultiply-in-internet-explorer) – Heretic Monkey Nov 01 '16 at 20:19

2 Answers2

4

background-blend-mode is not supported in IE or Edge

But there are a few fallbacks possible:

Blend mode:multiply in Internet Explorer

Community
  • 1
  • 1
Flops
  • 1,410
  • 15
  • 18
  • im sorry this may be an answer, but not the css answer. thanks for the info and your time – Michael Rudner Evanchik Nov 01 '16 at 20:46
  • 1
    There is actually second alternative answer in the post that dealing with this problem by adding pseudo ::before element and uses css with ie condition comment for fallback. – Flops Nov 02 '16 at 11:49
  • http://stackoverflow.com/a/38458156/1123488 - it's in the question that i posted link on :D – Flops Nov 02 '16 at 14:31
  • http://jsfiddle.net/5bteg7b7/ - this is cleaner version fallback, this with feature detects `backgroundBlendMode` and if possible using it, if not uses opacity – Flops Nov 02 '16 at 14:49
3

You can add this line to your css and it will get it working for you. You just have to adjust the level of opacity from 0.3 to whatever level you want. tested and working on edge. 

box-shadow:inset 0 0 0 2000px rgba(84,179,234,0.3);

here is the fiddle

http://jsfiddle.net/dQy8A/35/

sammyb123
  • 505
  • 1
  • 7
  • 22