Here's the scenario. You've just created a webpage and assigned a really nice background color to the page or a table on the page. Now, you copy that EXACT color and use it for the background color of a GIF. You anti-alias everything so the image looks great. So, when you place the image on the page, the two background colors should be exactly the same and there should be no clash of colors, right?

Wrong.

Some web browsers, including Netscape, use a color cube when it comes to picking web colors to show on a webpage. Even if you are using 65,536 colors (true-color), Netscape still dithers the image. So, technically, while the image background color is the same as the page or table background color, you will still see a difference in colors on the page.

The only way to solve this problem? Even though you saved the image with the 'correct' background color and anti-aliased correctly, you should save the GIF as a transparent GIF. Use the GIF background color as the transparent color.

I know what you're saying - you should not have to do this. You may be right, but what you should not have to do and what you need to do to make the page look good are too completely different things. This technique has worked several times in the past, and hopefully it will work well for you.

Print This Tip

Get E-Mail When New Tips are Online

Return to the Web Development - Images and Backgrounds page.