filter: gradient and background: fixed

Question

Code:

body { background-attachment: fixed !important; filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#000000,endColorStr=#3d3c3c); }

Gradient does not stay fixed in IE8 but scrolls into a plain white background. Gradients stay fixed in Firefox and Chrome and scroll with the page.

Is there any way to have it fixed in IE8 as well? I wasn't even aware this was an issue (can't find anything according to Google).

Edit: I created a test page with the code above (and quite a bit of Lorem Ipsum) and the background was fixed like it should be. So it must be something in my layout.

Answer 1

It looks like all you're missing is to set a height on the body. Adding this style works for me in IE 8:

html, body {height: 100%}

So, using your style from your fiddle, it would look like this:

html, body {height: 100%}
body {
    background-attachment: fixed !important;
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#000000, endColorstr=#ffffff);
}

And this is what the cross-browser version would look like:

html, body {height: 100%}
body {
    background-attachment: fixed !important;
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#000000, endColorstr=#ffffff);
    background-image: -moz-linear-gradient(center top -90deg, #000000, #ffffff);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000000), to(#ffffff));
}

Obviously, you could put the IE specific code elsewhere and load it conditionally, etc.

This tested fine in IE 8, Firefox 3.6, Chrome 9 & Safari 5 (Webkit) but does not work in Opera. For Opera, SVG or actual background image?