How do I make transparent background images?

Some images look better if their background color matches the browser window, making the image appear to float in the window. You can't do this by setting the background color of the image, since you can't control how people will configure their browsers.

You can control this by using GIF89a images, which have the ability to mark a single color in the colormap as transparent, forcing the browser to use its background color for those pixels in the image.

Here's a cookbook way to create a transparent background image:

Capture the initial image

You can do this with a variety of tools. Sun workstations come with xv, a handy tool for grabbing windows and regions of your screen. You can also steal the image from other web pages using netscape. Just click the right mouse button on the image you want, and choose "Save this image as..." from the menu that appears. You can also use xpaint, a paint tool for X Windows to create images.

Isolate the background

If the image does not have a single background color, you'll need to touch it up with some paint program. Sometimes you can get a single background color by merging color map entries using a tool like xv;

In any case, the goal is make sure that the background of the image is a single color that isn't used anywhere else in the image. This is important, since any pixel in the picture using that color will disappear when it is finally displayed in a browser window.

If possible, make the background color light gray (I use RGB values 191, 191, 191) so that the image will still look somewhat transparent when viewed with a browser that doesn't support transparent images.

Make the background transparent

If your image isn't already in GIF89a format, you'll need to convert it. Most GIF images are in GIF87a format, which doesn't support the transparency features.

I use a little program called giftrans to effect the translation. Giftrans converts GIF87a images to GIF89a, and lets you specify which entry in the colormap represents the transparent color. Depending on your platform, needs, and skills, you might want to download

To use the tool, just type

       giftrans -t index GIF87a-file > GIF89a-file
       

This converts the GIF87a-file to a GIF89a-file, with the index entry in the colormap made transparent; invoke giftrans with the -? option to see a complete usage description.

To determine the index of the background color, view the image using xv and open the color editing window. Click on a pixel in the background area of your image, and you'll note that a color in the editing window is highlighted. This is the background color. To determine its index, count colors (starting at 0) from left to right, top to bottom, until you reach the highlighted color. This value is the color's index in the colormap.

For example, if the image is called button.gif, and the background you want to make transparent is the 3rd colour in the list (i.e. index=2), then type

       giftrans -t 2 button.gif > temp.gif
       

Check to see if this has worked by viewing temp.gif using netscape. If you are happy with this, you can rename temp.gif back to button.gif

---

This page taken from Chuck Musciano's Transparant Gifs Page.

M.Stonebank@surrey.ac.uk

17th October 1995