Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>First, put your fallback <strong>first</strong> in the cascade. Example:</p> <pre> 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 */ } </pre> <p>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 <code>linear-gradient</code>. </p> <p>Second, <code>-ms-linear-gradient</code> support begins in IE10; it's not supported by IE9, so that's why it doesn't work in IE9 and below.</p> <p>You can use filters for IE9 through 6. Example:</p> <pre><code>filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3838', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */ </code></pre> <p>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 <a href="http://www.quirksmode.org/css/condcom.html" rel="nofollow">conditional comments</a>:</p> <pre><code>&lt;!--[if (gte IE 6)&amp;(lte IE 9)]&gt; &lt;style type="text/css"&gt; body { background-image: none; } &lt;/style&gt; &lt;![endif]--&gt; </code></pre> <p>Note that the conditional comments are HTML.</p> <p>Last, most sites probably don't need the <code>-moz</code>, <code>-webkit</code> or <code>-o</code> prefixes; each of them has <a href="http://caniuse.com/css-gradients" rel="nofollow">supported the standard <code>linear-gradient</code> for a while</a>.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload