Transparent Backgrounds

Sometimes inline images have more visual impact if the "background is removed". For example, consider the following two inline displays of the same image, the first with the background displayed and the second with it suppressed:

In the second example, the background is not actually removed, but is instead effectively set equal to the color of the browser display, which is equivalent to making it transparent. We now demonstrate how to "remove the background" from a GIF image using a Mac program called Transparency. On Unix and PC systems a related program called giftrans can be used to accomplish the same thing, though it is not quite as easy to use as Transparency.

We note that only a single color can be removed in this way, and it will be removed for all occurences in the figure. Therefore, this method is most effective if the background is a single color that does not appear in the image except in the background.

Making Backgrounds Transparent

Double-click the Transparency icon to open it. The menu is exceedingly simple, having only one item with the pulldown choices shown in the adjacent image. Choose "Open Gif" and from the resulting dialog box select the .gif file to be processed.

The image will be displayed, as in the example shown to the left. Place the mouse cursor over the color to be removed in the figure and hold the button down. A popup color map will appear over the figure, as shown in the image to the right, with the cursor over the entry in the color map corresponding to the color that the mouse was over when the button was clicked. This entry will be under the cursor, will be darkened, and will have an "x" in its box. Without moving the cursor off this color, release the mouse button, thus selecting this color for removal when the image is later displayed by a browser.

Next, select from the main menu "Save as Gif89...". and then select "quit". A dialog box will pop up asking whether you want to save the changes. Choose "Save" (see figure below).

Now, if all has been done properly, the GIF image will display inline with the color removed that was selected in the preceding steps.

Example for Your Homepage

Let's now use the above technique to add an image to your homepage with its background removed. We shall give you a .gif file to download for the example, but feel free to download a different .gif file if you prefer. Go to the following address:

http://csep10.phys.utk.edu/webcourse/samplegif.html

hold the mouse over the schoolhouse image at the top of that page, press the button, and save the file to your folder on your local disk with the default name (school4_logo.gif). Note that in what follows we assume that the file you just saved and your homepage are in the same folder.

Now carry out the steps outlined above to remove the (gray) background from this image, saving it under the original name in your folder. Then go to your homepage file in the same folder and insert the following text at a convenient place (use the mouse to copy and paste): 

  <img src="school4_logo.gif" hspace="15" 
  align="left"> Here is an example of some 
  text that should wrap around the preceding 
  figure of the schoolhouse.  The align="left" 
  command says to position the figure to the 
  left, and the hspace="15" command says to 
  leave 15 points (there are about 72 points 
  in an inch) horizontal space around the image.

Save the changes and reload the homepage in the browser; if all is well, you should then have the schoolhouse icon (or another image if you so chose) positioned left, with text wrapped around it on the right and the background of the image should be transparent.

Next   Back   Top   Home   Help