1px background fades in IE 7

[Gexus]

I have a 1x1 white PNG pixel that is 50% transparent... I'm using this has a background image.. such as this..

<div style="background: url('1x1.png') repeat; padding: 5px;">

 <div style="width: 100px; height: 100px; background: #000;">Some Text</div>

</div>

In IE 7, the pixel actually fades from top left to bottom right... Meaning the top left is the way the pixel should be... but then for whatever reason it fades out at the bottom right..

Anyone ever heard of this before?

[Mr Moo]

Do you have a link to that? That sounds cool.

Also, why not use a semi-transparent background with opacity. IE 6 and 7 support transparency through the Alpha filter, other browsers have the opacity style. Then you don't need the image, and it will work in IE6 which doesn't support transparent PNGs without the AlphaImageLoader filter.

[Dr John]

I have a problem imagining a single pixel fading across its width.

But if you are using the MS tft screen resolution improvement ClearType then you can get sub pixel alterations. Not that you can deliberately choose to do that, it's the software trying to provide resolution enhancement.

[Mr Moo]

I don't think he means per pixel, although it comes across like that. I think he means across the entire background that it's tiled. And I don't think even ClearType can do sub-pixel alterations.