Whether or not an image can appear transparent at all depends on two key factors:
- The file type - There are only certain image file types that have the properties to be able to use transparency. Two of the most known are GIF and PNG. PNG is the better of the two using alpha channels and such.
- The web browser – Here’s where we come back to one of the banes of every web programmer, browser compatibility. Like I mentioned above, PNG is leaps and bounds above the GIF format. Unfortunately, only standards compliant browsers(i.e. Mozilla based browsers) support PNG. Well, that means that it should work with all the latest browsers then, right? – wrong.
There are hacks that you can find on the net that supposedly get IE to correctly display PNG’s but I have yet to find one that didn’t break the site in some other fashion, so I don’t recommend that route.
Internet Explorer, while it has gotten better with version 6.0 in terms of standards compliancy, it still has a long way to go. And it still has a long way to go to support PNG files correctly. What does this mean to the web programmer?
Well, it leaves us with two options:
- Stick with the inferior and ancient GIF format so everyone can see our webpage in all its crappyness, or
- Use PNG’s that will appear correctly in only about 10% of the user’s browsers that come to our site.
Not exactly a great set of options.
Your best bet is to make a jpeg out of the image fading into the background color of the webpage. That way it will look like there is transparency when, in fact, there is not.