Bootstrap gradient mixin not working in IE9

Question

I have this code that I got from compiling a bootstrap gradient less mixin:

html, body {
    height: 100%;
    background-image: -webkit-linear-gradient(top, rgba(108, 91, 123, 0.8) 0%, rgba(53, 92, 125, 0.8) 100%);
    background-image: -o-linear-gradient(top, rgba(108, 91, 123, 0.8) 0%, rgba(53, 92, 125, 0.8) 100%);
    background-image: linear-gradient(to bottom, rgba(108, 91, 123, 0.8) 0%, rgba(53, 92, 125, 0.8) 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cc6c5b7b', endColorstr='#cc355c7d', GradientType=0);
}

http://jsfiddle.net/xzyfg67z/

It works OK in all major browsers, IE 10+ too, but not in IE9.

I wonder if Bootstrap gradient mixins are supposed to be supported at all by IE9, or is something with my code?

Answer 1

Background gradients in IE9 I don't think is supported. The workaround seems to be using SVG as outlined in this approach.