Michael Rudner Evanchik Michael Rudner Evanchik - 1 month ago 12
CSS Question

css div background-image url changing color to tinted blue not working in IE11

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/

Answer

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/

Comments