Images with transparent backgrounds




Can you help me with a problem I have with MS FrontPage and my Web page? I want to add graphics to my site and make them transparent to the background, and I'd be grateful if you could let me know how to do this. I've tried cutting around the image using Paint Shop Pro, and then copying and pasting into FrontPage, but I get a box around the image.
- Lee Mogford


Images are rectangular, but that doesn't mean they have to look rectangular on your Web page. Some images -- your aunt, boss or favourite John Howard portrait, for example -- can be much more striking if they melt seamlessly into the Web page background.
It's tempting to try to achieve this effect by setting the background colour of the page to, say, dark red, and the image's background colour to the same shade. The problem with this approach is that the colours stored in the image may not precisely match the colours generated by someone else's browser. Worse still, some browsers allow users to set a background colour that overrides the one specified by the page. In which case your painstaking design work will be shot to pieces.
The solution is to save your image in GIF89a format, which allows you to mark a certain colour as transparent. This gives the image a chameleon-like quality, so that when the image is viewed in a browser, every pixel of the transparent colour will be replaced by whatever's "underneath". This could be the user's default background colour, or the colour or background image specified by the page.

In FrontPage 97, green is made the transparent color (Illustration by Moira Prentice)

In Netscape Navigator, the transparent green is replaced by the Web page's background image

Most image-editing programs provide transparency options of one kind or another. Some are quite straightforward, others are rather complicated. In every case, however, you need to remember that a transparent colour is set for the entire image, not just the background. In other words, if your image has a white background and there are white elements in the foreground too, you'll lose every white pixel if you make white transparent. So unless you are looking for exotic special effects, ensure that your chosen transparent colour only occurs in the background. Here's the procedure for FrontPage 97.
Open the FrontPage Editor, choose an image with an appropriate, single-colour background and place it on your Web page in the usual way. Click on the image to select it, and then activate the Make Transparent button on the Image toolbar. Position the pointer over the background colour of your image and click once to make it transparent. And that's all there is to it. To check the results, try changing the background colour of your Web page and reloading it in your browser. The transparent areas of the image will always assume the background colour.
- Neville Clarkson


Category: Publishing and presentation, Internet
Issue: Apr 1997
Pages: 166

These Web pages are produced by Australian PC World © 1997 IDG Communications