How do I fix this gradient for IE 9 and 10?

Question

CODE:

body {
    background-color: #CACACA;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#CACACA), to(#F6FAFB));
    background-image: -webkit-linear-gradient(top, #CACACA, #F6FAFB);
    background-image:    -moz-linear-gradient(top, #CACACA, #F6FAFB);
    background-image:     -ms-linear-gradient(top, #CACACA, #F6FAFB);
    background-image:      -o-linear-gradient(top, #CACACA, #F6FAFB);
}

Using this on all browsers and platforms it's great but for IE 10 the gradient block keeps repeating like this:

What can I do fix this for IE 10?

For IE 9 the gradient doesn't even work it just shows the #CACACA. How do I fix this for IE 9 as well?

Answer 1

For IE10: background-image: -ms-linear-gradient(top, color[, color]*);

For IE9: filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='color1', endColorstr='color2', GradientType=0);

No repeat: background-repeat: no-repeat

Answer 2

take a look into this two http://webdesignerwall.com/tutorials/cross-browser-css-gradient/comment-page-1 and http://css3pie.com/ this might help you figuring your things up to cater your desires.

Answer 3

First, for IE10:

Drop the -ms-linear-gradient and just use linear-gradient without the prefix; IE10 doesn't need a prefix and IE9 doesn't support the standard at all either with or without a prefix. So the -ms- prefix is entirely unnecessary.

Secondly, for IE9:

IE9 doesn't support the standard gradient syntax. You could use the old-school filter style as supported by IE8; that does work in IE9, but that sucks -- it's horrible syntax, it feels like going back to the dark ages, and it has some nasty gotchas (incompatible with border-radius... heh).

Instead, I'd suggest using that good old polyfill script CSS3Pie to support standard gradient syntax in IE9. Makes things much easier to work with.