Search code examples
cssinternet-explorer-9gradientfixed

Fixed Gradient With Css3 in IE 9


I am looking to put a css3 gradient for the full length of the window, and when the window scrolls, the gradient would scoll with it. I cannot get it to work in IE9? Here is my code. Could someone point me in the right direction?

 body 
{    
    font: 100%/1.4 Tahoma, Geneva, sans-serif;
    margin: 0;
    padding: 0;
    color: #000;
    background-attachment: fixed !important;    
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#8fc2ed, endColorstr=#ffffff);    
    background-image: -moz-linear-gradient(center top -90deg, #8fc2ed, #ffffff);    
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#8fc2ed), to(#ffffff));

}

Thanks


Solution

  • It doesn't work because the filter is not a CSS background image, so background-attachment doesn't apply to it. You could try adding a 100% height element with the filter on it behind your page content and setting that to position: fixed.