css Gif white background stroke?

Question

Does anyone know how to fix the white background stroke in the css that you see when a transparent gif is overlayed on a colour?

Answer 1

I believe this has nothing to do with CSS, but with your GIF you've export. If you have an antialiast picture and you try exporting it to gif with transparency. It will automatically render a extra matte pixel for some semi transparent pixels.

If you want shadows be transparent than you should PNG files. The problem with PNG is it will not work perfectly in IE6

Answer 2

if you are looking for fix in IE have a look at http://www.howtocreate.co.uk/alpha.html

Answer 3

The little white border you're seeing is an artifact of the image program trying to guess out what the best background colour would be for the image transparency. In this case it's white.

If your image was on a light background, you wouldn't see it so garishly.

Try and export the image with a darker matte background to lessen the pixel assault on your eyeballs.

Answer 4

This is because of how transparency is handled in GIF files. The file format doesn't have an alpha channel, only a single color that is flagged as transparent. This means that each pixel can only be fully transparent or fully opaque.

When you save the image as GIF, the program will convert any pixels that are partly transparent into either fully transparent (if it's almost transparent) or fully opaue by changing the color into what it would be if it was drawn on a solid background color (called matte).

In your case the matte color is the default white, so any partly transparent pixels will be faded towards white. If you always display the image on the same background, you simply specify that color as matte, and the program will fade the partly transparent pixels against that color, making the transition invisible.

If you need to display the image on different backgrounds, you either need to use one image for each background color, or use the PNG file format that can support an alpha channel.

(Note that IE6 doesn't display PNG images with an alpha channel correctly, but there is a fix for that if you need to support IE6.)