Today I came across an interesting issue with transparent images being used as a repeating background in Internet Explorer 7 and 8 and thought that I’d share it with you in case you come across it yourself and become as baffled as I was.

The problem

I was using standard CSS to apply a transparent 1×1 PNG image as a repeating background for a div:
background:transparent url('images/transparent-bg.png') repeat left;
This worked fine in Firefox 3.6.2, which is what I was developing in (I usually check it in other browsers along the way at various stages), but when I checked it in Internet Explorer 8, the background was fine to the left, and then had faded to nothing by the time it got to the right and bottom of the div!

Here is what Internet Explorer 7 and 8 displayed it as:

And here’s what it’s supposed to look like:

I was a bit perplexed as to what was causing it and so turned to Google to see if anyone else had come across this issue, and there were some mentions of it, although not as many as I would have expected.

The solution

The problem turned out to be the size of the image being used. It was 1×1, and apparently this can cause Internet Explorer to get confused. Simply changing it to a 1×2 sized image, and Internet Explorer displayed it correctly.

Simple really as it turns out.