Internet explorer not displaying transparent repeated image correctly


I have a div that is using a 1x1px transparent red png image to fill the background. Everything seems to be working fine except for in surprise surprise, Internet Explorer (8). Instead of repeating the image it’s going off like a gradient. The page in question can be seen here:

I created a sample page with a div utilising the same method and IE rendered it correctly, so I’m pretty stumped now. Any ideas?

Many thanks


Your server seems to be down at present.

One tip though: repeating a 1px image thousands or millions of times is taxing on the browser. Use a larger one of, say, 20px. The file size is not going to be much different. For example, a 1x1px transparent png would be around 110 bytes and a 100x100px 264 bytes.

Oh right I didn’t know that! I thought it was more efficient to do it the repeating way! Thanks for the tip :slight_smile:

Slight misunderstanding. Repeat by all means, but use a larger repeating image.