'background-blend-mode alternative for internet explorer

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: enter image description here

My page on IE: enter image description here

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;
}
cssinternet-explorer


Solution 1:[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.

Solution 2:[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

Solution 3:[3]

You better use css pseudo elements (:before, :after) to specify it.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 fontophilic
Solution 2 Hugodby
Solution 3 Erik P.

Related Questions