CODEWITHSUNDEEP
htmlcssinternet-explorer
edgarmtze
edgarmtze

Reputation: 25058

IE explorer issue with linear-gradient

I have this background using linear-gradient, it works perfect in modern browsers like Chrome, Firefox etc. However IE shows only white background

body {
 font-family: 'champagne__limousinesregular',Georgia, Serif;
 font-size: 14px; 
 background: linear-gradient(0deg, rgba(255, 255, 255, 1)13%, rgba(220, 221, 222, 0.9)100%); 
background: -moz-linear-gradient(0deg, rgba(255, 255, 255, 1)13%, rgba(220, 221, 222, 0.9)100%); 
background: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 1)13%, rgba(220, 221, 222, 0.9)100%); 
background: -o-linear-gradient(0deg, rgba(255, 255, 255, 1)13%, rgba(220, 221, 222, 0.9)100%); 
 }

Is there a way to apply this background inside css and do something special when user is using IE? Like a conditional inside css? Is this possible

here is the jsfiddle

Upvotes: 1

Views: 139

Answers (3)

Sampson
Sampson

Reputation: 268462

Your code works just fine in Internet Explorer 10. If you wish to have a gradient in earlier versions, such as 9 and below, you should consider using the filter property. You can generate a gradient with those as well.

See: Gradient Filter

html {
    min-height: 100%;
    background: #000;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFCCCCCC, endColorstr=#FFFFFFFF);
    background: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 1)13%, rgba(220, 221, 222, 0.9)100%);
    background: -moz-linear-gradient(0deg, rgba(255, 255, 255, 1)13%, rgba(220, 221, 222, 0.9)100%); 
    background: -o-linear-gradient(0deg, rgba(255, 255, 255, 1)13%, rgba(220, 221, 222, 0.9)100%); 
    background: linear-gradient(0deg, rgba(255, 255, 255, 1)13%, rgba(220, 221, 222, 0.9)100%); 
}

Upvotes: 2

Aron
Aron

Reputation: 150

If you want full cross browser support in IE 6-8 you need to use:

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );

You may find this tool helpful: http://www.colorzilla.com/gradient-editor/ it automaticailly generates cross borwser css gradients.

Upvotes: 1

Spudley
Spudley

Reputation: 168843

CSS gradients are only supported in IE10.

Earlier versions, including IE9 do not support this feature.

There are several ways around it, but the best is to use a polyfill script such as CSS3Pie, which uses Javascript and VML to implement the standard CSS feature in older IE versions.

Upvotes: 1

Related Questions