CODEWITHSUNDEEP
internet-explorercsscross-browserinternet-explorer-9
Jitendra Vyas
Jitendra Vyas

Reputation: 152637

IE 9 CSS gradient with image in background not working

I'm using this code it's working fine in Chrome and Firefox but not in IE9. and according to this page Multiple background and background-size is supported in IE9

span.select {
    position: absolute;
    bottom: 0;
    float: left;
    left: 0;
    line-height: 1;
    text-indent: 10px;
    background: #ffffff;
    background: url(../img/color-arrow.png) no-repeat, linear-gradient(top, #ffffff 0%,#a9a9a9 100%);
    cursor: default;
    z-index: 1;
    border: #dadada 1px solid;
    border-radius: 4px;
    background-position: 100% center;
    background-size: 1.5em 0.6em, 100% 100%;
    text-shadow: 0px 1px 1px #fff;
    white-space: nowrap }

I'm using Multiple background and Background Resize in it

Upvotes: 2

Views: 3295

Answers (2)

Web_Designer
Web_Designer

Reputation: 74530

IE9 Doesn't support gradients. IE10 supports them unprefixed. IE9 did implement SVG however.

I'd recommend using colorzilla's gradient editor. To use SVG as a fallback, just check their "IE9 Support" checkbox.

If you really need gradients in IE8 (which you shouldn't, cause they should be used for progressive enhancement only) you can use IE's proprietary filter property, but be careful, cause it's very buggy.

Upvotes: 2

Scott
Scott

Reputation: 21882

IE9 supports multiple background images, but not a mix of multiple background elements. Your issue is the image AND the gradient.

In addition -ms- doesn't do anything for CSS compatibility on any property.

Upvotes: 2

Related Questions