Transparent Background Images

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 snapshot, a handy tool for grabbing windows and regions of your screen. You can also steal the image from an online image archive or draw it using any of a number of drawing tools. I've used Frame Maker to create images along with xpaint, a paint tool for X Windows.
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; I've also converted images to PCX format and repainted the background areas using MicroSoft Draw, running under the Wabi Windows emulator on my workstation. 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 207, 207, 207) 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 Giftrans source code for Unix (available from this machine or the European FTP site) Giftrans documentation (nroff format) (available from this machine or the European FTP site) Giftrans.exe executable for DOS (available from this machine or the European FTP site) 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. You can also specify the color as an RGB triple or an X Windows color name; 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. NOTE: Make sure you understand the difference between a color value and a color index. As an alternative, you may wish to use the GIF89a conversion tools in the PBM toolkit. After obtaining and compiling this package, you'll have (among many others) two programs: giftopnm and ppmtogif. You use these tools to create a transparent image like this: giftopnm GIF87a-file | ppmtogif -trans color > GIF89a-file Ppmtogif requires that you specify the color as the actual X-compatible color, instead of the index of the color in the color map. This means you can use an RGB triple or a name in the X color database. In practice, I had trouble specifying a color name due to the way PBM was configured when I built it. Instead, I used a hexadecimal RGB triple, like this: giftopnm orig.gif | ppmtogif -trans #CFCFCF > new.gif In this case, my background color was gray, so I used the #CFCFCF triple (CF is 207 in hexadecimal) to convert the gray pixels to transparent. Some people have pointed me to another transparency tool called giftool. Giftool handles transparency and can also be used to enable image interleaving. Finally, Mac users may want to use Transparency, a Mac GIF transparency tool. I've not used this tool, so I cannot answer any questions about it.
An Example	The buttons on my home page all have a transparent component. I started by drawing the button in Frame Maker 4.0, tweaking the shading on the border of the button and leaving the background white. I grabbed this image right off my screen using snapshot: Then I loaded the image into xv and changed the white entry in the colormap to be gray (207, 207, 207): Finally, I used giftrans to change the gray entry (color map entry 6) to transparent: Normally, I wouldn't leave a transparent border around an image (notice how there is a two pixel border visible in the first and second images), but my browser puts a highlighted border around images used in anchors. Since these buttons are designed to be used as anchors, the "anchor ring" interferes with the shadow effect, ruining the appearance of the button. By adding the border, the ring is detached from the shadow, the effect is retained, and the ring still indicates that the image is mousable. Notice the difference: Another solution is to use the "noborder" feature within the NetScape browser to disable borders altogether. The good thing is that your images will look nice; the bad thing is that there is no longer any visual indication that your images are, in fact, clickable links. To turn the borders off, use the border attribute in the <img> tag: <img src="http:/images/trans_example_3.gif" border=0> which looks like this: One last bit of advice: when you check how your images look in your browser, be sure to turn off your browser's image cache. If the browser has already cached a non-transparent copy of the image, you'll see no change in the image and wonder why things didn't work. Either rename your new image or disable the cache before viewing the image for the first time.

This server has moved! If you referenced this server via the name "melmac.harris-atd.com", please update your link to refer to "melmac.corp.harris.com".