Previous Tip  |  Next Tip  |  Design Tips   | [Bill's Home]

12. Transparent Backgrounds

Transparent backgrounds

The GIF and PNG formats support transparent colors, which allows graphics to have a transparent element which will take on the colour of the background. This is useful in WWW design when a graphic is included on differing backgrounds. For example the two graphics are my design for a School of Computing graphic. The first has been saved with a transparent background, and the other does not have a transparent background:

Thus, whenever possible, save your graphics with a transparent background. The following shows the options for saving a graphic. If the No Transparency is selected there will be no transparent colours in the GIF file. The Index Transparency allows for transparency for a certain colour (by default this is normally white, but the eye dropper can be used to select the transparent colour). Unfortunately Index Transparency can make elements within the graphic to be transparent, thus Alpha Transparency can be used to define transparency up to the edge of an image, and not within it.

To see the difference between Index and Alpha Transparency, observe the following graphics:

Alpha Transparency
Index transparency

and with another:

Alpha Transparency
Index transparency

You can see that the Index Transparency has changed some of the white fills to the transparent colour, whereas the Alpha Transparency has only made the background transparent.