background-blend-mode alternative for internet explorer

Question

I'm using background-blend-mode on my page but IE doesn't support it.

How can I solve this?

My page on Chrome/Firefox:

My page on IE:

My CSS:

div#background-image-new {
background-image: url("/img/profile_pictures/bg.jpg");
/* z-index: -2; */
background-size: cover;
background-color: rgba(6, 18, 53, 0.75);
background-blend-mode: overlay;
position: fixed;
top: 0;
height: 100vh;
width: 100vw;
z-index: -1;
}

Answer 1

I see three possible solutions:

1. Just use an image editing program and flatten the layers. (LAME!)
2. Use js to force the blending. (overkill)
3. Target IE to use opacity instead of a fancy blend mode.

I think option three is reasonable, but if your key client or audience is IE heavy and very visually discerning, option one gives the most accurate representation of your mockup.

You can target IE with a specific stylesheet, or modernizr.js as a test for browser capabilities.

You can also use a few fast and dirty IE css hacks:

//IE 9 and down
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";

// IE 10 and 11
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    opacity: 0.8;
}

These will be ignored by other browsers, but is not future proof. You may need to revisit this hack if IE should ever still use the -ms- prefix on high-contrast, and support background blend mode in the same version, else the browser will apply both opacity and blending. Not the end of the world by any means, but something to be aware of.

Answer 2

A good solution is to use pseudo class :before and a separate IE stylesheet. For the css (eg: ie.css)

.my-background-class:before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: rgba(6, 18, 53, 0.75);
  background-blend-mode: unset;
}

And in your html file, in the head tag :

<!--[if IE]>
<link rel="stylesheet" href="/css/ie.css">
<![endif]-->

Source : https://teamtreehouse.com/community/fallback-for-css-blending-modes