IE Background image with transparency

Why would this simple line of code work perfectly in firefox e.t.c but in IE it creates some weird f开发者_开发问答ade issue.

#content { background:url(images/bg-trans.png) repeat; padding:25px 21px; width:918px; overflow:hidden; }

Its like the transparency is started in a corner but then it gradually fades out...very annoying!!!

I ran into this awhile ago with IE8.

It's because you have a 1x1 background png with transparency. For some reason, IE8 borks on these, and applies them as a fading gradient down a large area.

The solution, oddly enough, is to simply make your background .png file bigger in dimension. 1x2 or 2x1 will do it. To be nice to the browsers, something a little bigger is better, 10x10 or 20x20 maybe, as this means they don't have to render it so many times across the background.