Vadim Vadim - 2 months ago 23
CSS Question

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

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

linear-gradient() is supported unprefixed on IE10 RTM and later, including IE11. You never need the -ms- prefix unless for some obscure reason you need to target the pre-release versions of IE10.

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