I have a gradient background image in my web application, it goes from dark at the top to light at the bottom. In Firefox, this image is handled properly, where upon scrolling vertically downwards on the page, the dark top section disappears.

However, when I started testing in IE (I'm using IE8) the background image stays fixed behind the screen as you vertically scroll, meaning the dark top section of the background image is always rendered at the top of the IE view.

I've set the background tag to have scroll defined, which from all I can tell should solve the problem, but IE is not happy.

background: #470077 url( images/abcd.jpg ) repeat-x scroll;

I made sure to be clearing the data in IE in case it was caching the old style before I added scroll.

Textual representation of issue (x = darkest, o = dark, _ = light, - = lightest) Firefox:

top of page

xxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxx
oooooooooooooooooooooooo
oooooooooooooooooooooooo
___________________________
___________________________

scrolled down a bit

oooooooooooooooooooooooo
___________________________
___________________________
--------------------------------------
--------------------------------------
--------------------------------------

IE:

top of page

xxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxx
oooooooooooooooooooooooo
oooooooooooooooooooooooo
___________________________
___________________________

scrolled down a bit

xxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxx
oooooooooooooooooooooooo
oooooooooooooooooooooooo
___________________________
___________________________