How to make background-image with linear-gradient work on IE 11?

Question

Any idea how I can make background-image with linear-gradient to work on IE 11?

The following code works fine on IE 10 but doesn't work on IE 11.

background-image: url(IMAGE), -ms-linear-gradient(top, #ffffff, #BEE38F);

I can make linear-gradient to work on IE 6-9, 11 using the following filter but background image is not displayed in this case.

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#BEE38F',GradientType=0 )

I'm open to an ideas.

Update: Here's the code I currently have.

background-image: url(IMAGE), -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#BEE38F));
background-image: url(IMAGE), -webkit-linear-gradient(top, #ffffff, #BEE38F);
background-image: url(IMAGE), -moz-linear-gradient(top, #ffffff, #BEE38F);
background-image: url(IMAGE), -ms-linear-gradient(top, #ffffff, #BEE38F);
background-image: url(IMAGE), -o-linear-gradient(top, #ffffff, #BEE38F);
background-image: url(IMAGE), linear-gradient(to bottom, #ffffff, #BEE38F);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#BEE38F',GradientType=0 );

Answer 1

linear-gradient() is supported unprefixed on IE10 RTM and later, including IE11. You never need the -ms- prefix — only the pre-release versions of IE10 required it and those versions don't even run anymore. You're just wasting space by including the prefix in your CSS.

Note that the directional syntax for linear-gradient() is different; what was originally top is now represented as to bottom instead (see this blog post, this question, and the spec for details):

background-image: url(IMAGE), linear-gradient(to bottom, #ffffff, #BEE38F);

Answer 2

Maddening, isn't it?

Prior to IE 11,

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cccccc');

For IE 11:

background-image: -ms-linear-gradient(top, #FFFFFF 0%, #CCCCCC 100%);

That's right folks, we not only have to worry about supporting older IEs, apparently we'll now have to deal with NEWER IE quirks as well...

Answer 3

These are all super great solutions if you are overlaying a linear gradient directly on text. But if you want to display it overtop an image it doesn't work in IE.. don't ask me why but it doesn't.

I scowered many resources and finally came across this diddy

@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
 .yourTargetClass:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: linear-gradient(-221deg, rgba(205,234,255,0.41), rgba(227,253,255,0.82)); /* THIS IS WHAT EVER OVERLAY COLOUR YOU WANT */ }
    opacity:0.55;
  }
}

I wrapped this within an IE selector for 10+. You need to include the opacity as that will help blend the gradient overlay with the content.

Hope this helps someone!

Answer 4

I noticed that for IE 11 the liniear-gradient works fine on itself. Unfortunately it doesn't work well as an overlay if you want to use a bacground image as well.

The only way that I was able to make it work for me was to switch to using rgba instead of hex colors and percentage. Also it only worked when I put the liniear-gradient first and not vice versa.

background-image:
    linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73)),
    url('images/background.jpg');

Answer 5

I faced the same issue and in addition to doing the filter and linear-gradient, I also had to add the width in my CSS class, once I set the width, I could see my custom styles with background gradient.