IE css background issue [closed]

Question

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.

---

This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.

Closed 8 years ago.

Improve this question

Is the following correct since IE doesn't support "liner-gradient"?

    background: #f5f7f9; /* Old browsers */
    background: -moz-linear-gradient(top, #f5f7f9 0%, #cdcdcd 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f7f9), color-stop(100%,#cdcdcd)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #f5f7f9 0%,#cdcdcd 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f5f7f9 0%,#cdcdcd 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #f5f7f9 0%,#cdcdcd 100%); /* IE10+ */
    background: linear-gradient(to bottom, #f5f7f9 0%,#cdcdcd 100%); /* W3C */
    background:url(../img/backgrounds/form_bg.png) 0 0 no-repeat;

I am basically offering an image fallback.

This is not working in IE9 and below

Answer 1

First, put your fallback first in the cascade. Example:

body {
  background: url(http://placekitten.com/500/500) top center #cdcdcd no-repeat;
  background: -moz-linear-gradient(top, #f5f7f9 0%, #cdcdcd 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f7f9), color-stop(100%,#cdcdcd)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #f5f7f9 0%,#cdcdcd 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #f5f7f9 0%,#cdcdcd 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #f5f7f9 0%,#cdcdcd 100%); /* IE10+ */
  background: linear-gradient(to bottom, #f5f7f9 0%,#cdcdcd 100%); /* W3C */
}

Modern browsers consider the gradient to be a kind of background image. With the fallback first, browsers that can understand the fallback will use it, and browsers that can understand the other specifications will override the fallback with the gradients. For example, IE7 will only understand the background image, and ignore the gradients. Chrome will do the background image, and then override the background image with the linear-gradient.

Second, -ms-linear-gradient support begins in IE10; it's not supported by IE9, so that's why it doesn't work in IE9 and below.

You can use filters for IE9 through 6. Example:

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3838', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */

If you use a filter, you will also need to disable the fallback image, since IE 6 - 9 don't replace background images with filters. I prefer to do this with conditional comments:

<!--[if (gte IE 6)&(lte IE 9)]>
<style type="text/css">
body { background-image: none; }
</style>
<![endif]-->

Note that the conditional comments are HTML.

Last, most sites probably don't need the -moz, -webkit or -o prefixes; each of them has supported the standard linear-gradient for a while.