css - 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);