Home/ Questions/Q 8672687
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T19:16:01+00:00

I’m generating a bar of horizontal gradient as a background across my site that

  • 0

I’m generating a bar of horizontal gradient as a background across my site that works perfectly in every browser except…IE9.

The gradient itself is working, it is just that I want to limit the height of the blue bar. Check it out in Safari/Firefox/Chrome and then in IE9 and you can see that the blue gradient fills the entire element.

Horizontal gradient bar using CSS

Here is my CSS:

#inner {
background: #1e5799;
background: -moz-linear-gradient(top,  #1e5799 0%, #0057be 35%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(35%,#0057be));
background: -webkit-linear-gradient(top,  #1e5799 0%,#0057be 35%);
background: -o-linear-gradient(top,  #1e5799 0%,#0057be 35%);
background: -ms-linear-gradient(top,  #1e5799 0%,#0057be 35%);
background: linear-gradient(to bottom,  #1e5799 0%,#0057be 35%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#0057be',GradientType=0 );
background-size: 1px 10%;
background-repeat: repeat-x;
margin: 0 auto;
padding: 1em 0;

}

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This code should work on IE9:

    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMWU1Nzk5Ii8+PHN0b3Agb2Zmc2V0PSIwLjM1IiBzdG9wLWNvbG9yPSIjMDA1N2JlIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2cxKSIgLz48L3N2Zz4=);

    I made it with Visual CSS Gradient Generator

    Updated CSS:

    #inner {
background: #1e5799;
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMWU1Nzk5Ii8+PHN0b3Agb2Zmc2V0PSIwLjM1IiBzdG9wLWNvbG9yPSIjMDA1N2JlIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2cxKSIgLz48L3N2Zz4=);
background: -webkit-gradient(linear, center top, center bottom, color-stop(0%, #1e5799), color-stop(35%, #0057be));
background: -webkit-linear-gradient(top, #1e5799 0%, #0057be 35%);
background: -moz-linear-gradient(top, #1e5799 0%, #0057be 35%);
background: -ms-linear-gradient(top, #1e5799 0%, #0057be 35%);
background: -o-linear-gradient(top, #1e5799 0%, #0057be 35%);
background: linear-gradient(to bottom, #1e5799 0%, #0057be 35%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#0057be',GradientType=0 );
background-size: 1px 10%;
background-repeat: repeat-x;
margin: 0 auto;
padding: 1em 0;
}

    IE9 doesn’t support CSS3 gradients, but it supports inline SVG. I don’t recommend to mix up filter and SVG backgrounds on IE9, i think the best approach is to use conditional comments as explained in this article by Paul Irish.

    • 0