go.

While creating images for a site I was working on last week, I had a problem:

• I needed to create an image of the company’s logo
• The logo needed to appear in the unstyled version of the page as well as the styled (naturally)
• In the styled version of the page the logo would be overlayed onto other graphic elements.

In case it isn’t clear, the problem is that (ideally) the unstyled logo should show no sign of the styled background, and the styled logo should fit seamlessly–e.g. be antialiased to match the styled page behind it.

PNG, you say? Sure, that’s a possibilty, but PNGs with transparency are A)large, and B)not fully supported in IE. In the past I have either included the styled background in the image, or excluded the logo image from the unstyled page.

This time, however, It occurred to me that it may be possible to create the basic logo as a transparent .gif and apply the styled background to the img tag as a background-image. In this way the markup remains the same, but the image appears to change to suit the styled content.

A live example of the technique is available at Omni National Bank’s redevelopmentlending.com. The ONB logo in the upper-left corner uses this technique to create the white glow around the red arc.

This technique hasn’t been widely tested, and its uses are limited, but it is another tool to have in your toolbox.