If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

Over on SonSpring there is a great tutorial for doing a PNG Overlay. This works great especially if you do the design and then another webmaster goes in later to update say the header image. With this overlay technique you don’t have to worry about the look of the site remaining consistent. Plus, the user doesn’t have to worry about using Photoshop or another image editing program to keep the same look.

The process involves creating a transparent PNG image that you will use as your overlay, or mask, around a regular JPEG or GIF. Even if you are the one who maintains the site, it will help save time anytime a change to a main image may be needed.

The nice thing about this method is that you are just applying an absolutely positioned

with a PNG background over the top of a regular image, so you still get the benefits of a relevant alt attribute / value pair, as well as printing images because they are technically in the foreground as far as the browser is concerned. It will even work in IE6, with the proprietary Microsoft alpha style filter applied. IE7 will handle the transparency natively.