IE 7 / IE 8 PNG Bug
Internet Explorers 7 and 8 like to stretch the CSS background-image of a PNG when it's 1 pixel by 1 pixel and supposed to be background-repeat: repeat, and extrapolates it across the container into a gradient with transparent. Looks like a nice bicubic resize, too — something I wish they'd actually add to HTML. I first discovered this in Internet Explorer 8 and figured it was a new mistake but apparently also happens in 7.
What makes this browser bug even more difficult is that it's sporadic — showing up only part of the time.
The fix, for those of you whom come across this, is to make the image larger. You don't need to make the background-image match the size of the container, just larger than 1 pixel. I found 4 pixels by 4 pixels worked.
