For this project, I have a page template with several container elements that all have a 1 pixel by 1 pixel PNG background set to repeat, and it looks great when testing it in IE 7 and IE 8. So, I created my next page template with the same styling. This time, IE 7 and 8 both choked when handling the background-repeat. Instead of repeating, both of these browsers inexplicably tried to stretch the 1×1 image across the entire container. The PNG happened to have 60 percent alpha transparency, but I’m not sure that matters. A coworker suggested making it a 10×10 pixel image instead, just to see what happens. Surprise, surprise. That fixed it.

I did a little more searching to see if anyone else had come across this and found this recent blog post. The author also found that this bug appears to occur at random, and that a 4×4 pixel image solved his problem. Since there’s no very little file size difference between 10×10 and 1×1, I’ll stick with the 10×10. But I agree with him that this bug created a cool effect, and it would be great if it could be replicated at will.