Graphics are usually stored as rectangular images. If you want to present a graphic image with an irregular outline shape, consider using transparent GIF images.

Most graphics packages support transparent GIF images, and have an options dialog box for controlling the storage of the image. When you use a transparent GIF image, you can specify a single color as the background color. When a Web browser paints the image, it does not paint any of the pixels of this color. The effect is that the Web page background shows through, and the image appears to float or be drawn on top of the page background. This is a cool effect, and it adds interest to any Web graphic.

For more information on transparent GIF files, check out Transparent Images, Yahoo's index of resources on transparent GIF images.

Also, remember that you can sometimes get the same effect without using transparent GIF files. Just use a background color for your Web page, and choose the same "background" color for your image. When the browser paints the image, the "background" color of the image will be indistinguishable from the page background color, and you will get the same effect as the transparent GIF. Of course, this only works if the page background is a solid color, but it is dead simple and it works with any graphics file format.

back to Website Design Tips
feedback