	Department of Engineering

University of Cambridge > Engineering Department > computing help

Transparency with GIMP

It's sometimes useful to have images with transparent backgrounds - they stop web-pages looking as if they're full of rectangles and make design more flexible. The JPEG format doesn't support transparent backgrounds but PNG does, and modern browsers render them accurately on screen (though print-outs may be inaccurate). Here are 2 PNG images

They look the same, but against a non-white background the difference becomes clear - the 2nd image doesn't have a white background, it has a transparent one

Gimp can be used to add transparency to images. If you have GIMP (it's free) you can download the first image and follow these steps to produce the second one.

Load the image
Somehow you need to select the pixels that you want to make transparent. Easiest is to select by colour (the Select menu has a By color item). If you choose that option and then click on the background then all the pixels of that color (in this case white) will be selected. In this example that's rather more than the background - some of the image is selected too. If you care about that then you could try the magic wand tool instead. This can also select by color but only selects contiguous regions. To see the difference look at these 2 images: the 1st was created using "by color" and the 2nd by using the "magic wand"
From the Layer menu choose transparency and pick the add alpha channel option. This adds transparency information to the image
From the Edit menu choose Clear to clear the selected pixels
Now save as a PNG file, making sure you select this option

Use of transparent background images on web pages is often used in association with the z-index property which controls the "depth" of items on a page - the lower the z-index the further the object is from the viewer. The following images show the effect of changing the z-index property. Note that only elements with a position and a value set are affected by the property.

Text Text Text Text	Opaque background image with z-index:1. Text with z-index:0
Text Text Text Text	Opaque background image with z-index:0. Text with z-index:1
Text Text Text Text	Transparent background image with z-index:1. Text with z-index:0

The first image is displayed using this HTML code

   <span style="position: relative; z-index:0;">Text Text Text Text</span> 
   <img src="releaseprintjob.png" style="position: relative; z-index:1;left:-100px" />

| computing help | Gimp |