IE Scrolling/Background rendering bug - FIXED

Yesterday I wrote a post about a bizarre bug on IE rendering when you scrolled the document. Which led to a comment by David Woods hitting at the usage of background images. And he was right. This bug started showing when I added a 800x600 background image to my page.

Searching I've found a blog post where Mike Golding had a similar bug and knew the root cause of the issue. The summary is that if you have a BG image on an object on top of a part of the page that is transparent, IE might display it incorrectly when you scroll the page.

My bug was because the image was on the body, and there is nothing behind the body! But actually, there is one thing behind a body background image: the body background color!

So, when I changed my CSS from:

    body

{ background: url(bg.gif) no-repeat

}

to

    body

{ background:#fff url(bg.gif) no-repeat

}

The problem went away!