Adding transparency to an image

You can make a single color in an image transparent so the background of the Web page shows through. This is useful for making the rectangular background and outline of an image disappear. It can also be useful for controlling the space between objects or lines of text with an invisible image.

To make the background of an image transparent:

  1. If necessary (such as with most scanned images and photographs), use an image-editing program to make the image background a single color and then add the image to your Web page.
  2. Select the image and open the Image Object Editor.
  3. Click the Appearance tab to display a new set of options.
  4. Click the Transparency and Interlacing Set button to open the image file in the Transparency and Interlacing Image Editor.
  5. Move the pointer over the image until it turns into an eyedropper, and click to select the color of the image you want to make transparent.

    All pixels of the selected color become transparent.

    Note You can only make one color transparent in an image.
  6. Close the Transparency and Interlacing Image Editor and save the changes to the image file when Claris Home Page prompts you to.

    The color you selected in the image becomes transparent so you can see the background of your Web page. To learn how to change the color or background of your Web page, see Setting the color and background of your Web page.

Tip To open the image in the Transparency and Interlacing Image Editor using the mouse, right-click (Windows) or Control-click (Macintosh) the image and choose Transparency and Interlacing from the pop-up menu.

To remove transparency from an image:

To use a transparent image to control line spacing:

  1. Make a square image that is a single color and the same color as the image's background (usually white).
  2. Set the size to be a fixed amount of pixels.
  3. Make the image transparent.
  4. Insert the image between the lines of text you want spaced according to the size of the image.

Note You can also insert spacers to separate objects and text on your page. See Using horizontal rules to separate text, for more information.


Previous topic | Contents | Next topic