Web Development - Images and Backgrounds

GIF Background Color = Webpage Color = Problem?

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.

Return to the Web Development - Images and Backgrounds page.

Print this tip

Get the Newsletter

Thanks For Sharing!

Newest Tips:

Microsoft Word 2010
Make Sure Others Can See Your Fonts

Microsoft PowerPoint 2010
Animations or Video Displaying Poorly?

Google Chrome
[MODIFIED] Report a Malfunctioning Web Page, Crash, or Other Issue

Google Gmail
Show Unread Message Count as an Icon

Follow Us!

Email Twitter RSS

About MalekTips and the Author