Background Transparency in Images

There are three standard file types accepted for common use on the Internet:

• Grapic Interchange Format (.gif)
• Joint Photographic Experts Group (.jpeg or .jpg)
• Portable Network Graphic (.png)

Of these, only .gif files support background transparency.

When talking about image "background" colors we must understand that there are two backgrounds to consider. Your picture may be of a red dress on a yellow background. You would say the background color is yellow. In graphics programs we work with two selected colors simultaneously. One is the foreground color and one is the background color. The background color selected in our graphics program may not be the "background" area of our image file. It is simply one of the colors in the image designated at the background color for current use in the program. Usually the program will have some way of showing these selected colors. Paint Shop Pro v3.12 represents them this way:

The upper right overlapping square shows the selected foreground color (red) and the lower right square shows the selected background color (white). In this case the selected background color is white, not the yellow image background area in our picture of the red dress. This is where people mostly run into trouble.

Truly this is the most confusing part of setting a color as transparent in a .gif file. Only one exact color may be set to transparent. If we want the yellow background in our dress picture to be transparent we must make sure of three things:

1. that it is all the same shade of yellow
2. that we know exactly which yellow it is
3. that it is the color selected as the program background

Let's work through a specific example with a simple grahic file.

Background transparency in a .gif file is really an easy thing to work with but for the beginner it can be a very difficult thing to get your mind around. First, for the purpose of Internet graphics usage, only .gif file types can have transparent backgrounds. Let's consider this graphic image file:

You might say the white area is the background. From the human perspective, looking at this image, that would be a fair thing to say. From a graphic program perspective, however, the background color is not necessarily the picture background. A background color can be any one of the picture's colors designated in the program. There are different means of selecting which color will be designated in each different graphics program but the principle is always the same.

For the purposes of this discussion I am using Paint Shop Pro v3.12. It is an easy to use, free to acquire, freeware program. Screen shots shown here are all taken from that program.

In PSP v3.12, foreground and background color selections are shown (and selected) with this tool:

Here the foreground color is shown as red. This is the current color you would be working with, for drawing, filling, etc. The background color is white. So, if we saved our "FREE" graphic, above, with white chosen as the background color and set the option to "Set the Tranparency Value to the Background Color" then we should get what is expected:

Shown without the border it would look like this:

Which is exactly what we want -- the background of the graphic is transparent and the background of this section of the web page shows through.

However, if you set the background color like this:

with yellow as the program background color, then what we get is this:

The part that was yellow is now transparent and probably this is not what we desired. You have to select the right color to be the program background, no matter where it is located in the image. What the program sets as transparent is the color you have selected as the program background color at the time you save the file, not what you consider to be the color of the picture's "background" area.

The next confusion we have to deal with is that .gif format graphics can have more than one of the "same" color -- ie: several shades of yellow or white, etc. -- but only one of them can be set as transparent. This can be VERY confusiong! Let's consider this graphic:

As you can see, it has three areas of color: red, green and blue. These colors are stored in numeric form in the graphic file and can be displayed or represented in your graphic program in any of several ways. Here is how Paint Shop Pro v3.12 does it:

As you can see, there are three colors, each in its own box or cell. Different .gif format files can have 2, 16 or 256 colors. Not all colors need to be assigned. Unused colors show up as white cells. This graphic only uses three of 16 possible colors.

If we select the red color as the program background color and save the graphic with background set to transparent, this is what we get:

The red portion of the image is transparent and the background of the page shows through. Now, let's add another color designation to this graphic:

Notice that I added another "red" to the image's colors. It is very similar to the red to its left. Your eye may actually show these to be the same shade of red, but in fact they are actually different shades. It can be hard to understand, but a .gif file can have many shades of the same color. Even though we have added another color to the image's color palette the graphic still looks the same, because the extra shade of red is not used in the actual graphic. It is availab eot be used, it's just not there. Here is the image shown with no transparency:

But now, let's make half of the blue area at the bottom red using the second red color. It will look like this:

Remember, there are two different reds in use here. Even though the two red parts of the graphic look like all one color, it is actually two different shades of red, distinct colors from two different color cells stored in the image. If we select the second red as the program background color and save the image with "background set as transparent", here is what we will see:

This is the part the confuses people so easily. Sometimes you will have an image with what looks like a single color background (let's say it's white) and you set white as transparent but you find not all of the background ends up as you want it. The image has a splotchy look where you expect transparency. Maybe even large areas are still the color you thought you had set to transparent!

This is due to the inclusion of two or more color cells set to similar shades of the same color. You have only set one of them (all you can do) to be the program background color and only that color is actually transparent. The other areas which appear to be the same color are really similar but different shades, and they are represented by a different color stored in a different cell and that cell is not designated as the program background and therefore is not transparent.

There is a way to easily overcome this. Experts use special tools like "magic wands" or "masks" which are part of the graphic program tool set to make all areas that look the same color actually be indicated by the same color cell. These tools are a little complex, perhaps difficult to use for the beginner, and are beyond the scope of this tutorial.

Instead, we will use a simple process:

Choose the color in your image that you want as your background and open your color palette box.

Add a new color to the palatte that is not similar to any other color in the graphic. I typically use hot pink or bright yellow... something different that will stand out and make editing easier:

Next, pour this color into all the areas in your picture that are (or appear to be) the color you want for the background color -- in our example this would be the two red areas:

Set the graphic's background color designation to hot pink:

Finally save the graphic with the background set to transparent:

On complex graphics with many areas of the same color (but different cells) this process can be a little tedious but if you work it through using the zoom function of your graphics program, you will be very pleased with the results.

Remember also that each graphic program will have slightly different terms and functions to accomplish this but all good programs will support this method.

Hopefully this helps you understand transparency a little better.

It's always the right time to use good code!

[ back | top ]