Tuesday, February 18, 2014

Linear Gradients not working in IE9 but working in Firefox and Chrome

I came across with linear gradients not working correctly in IE 9. One solution suggested by a popular forum is to utilize an image as the background of a particular element. Since I'm not a graphic designer, I searched for other solution. I came up with an alternative which is to embed an svg file instead of an image file as an element's background. The css code below won't work in IE 9.
 body   
 {  
    background-image: -ms-linear-gradient(top, #000, #666);  
 }  
Here's a solution using .svg file:
 <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">  
  <linearGradient id="g762" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%" y2="100%">  
   <stop stop-color="#000000" offset="0"/><stop stop-color="#666666" offset="1"/>  
  </linearGradient>  
  <rect x="0" y="0" width="1" height="1" fill="url(#g762)" />  
 </svg>  
Usage:
 body   
 {  
    background-image: url('./gradient.svg');   
 }  

0 comments:

Post a Comment