Transparent image 1x1 displaying in weird IE8

Came across a weird bug when I made a 1x1 semi-transparent .png image that repeats for a background on my website. IE8 renders it as a gradient!!! It get's even wonkier when you try to scroll your window or mouse-over content. I had already tested this site in the other normal browsers (Firefox, Opera, Safari and Chrome). It looks exactly as I designed it in these.

Simple Fix:

I just increased the size of the image to 4x4. I read somewhere else that 1x2 will also do the trick but I decided to make it a little larger to make sure.