{"id":8465,"date":"2006-10-20T23:33:29","date_gmt":"2006-10-21T03:33:29","guid":{"rendered":"https:\/\/htmlcssjs.wpengine.com\/?p=8465"},"modified":"2014-10-08T16:49:49","modified_gmt":"2014-10-08T20:49:49","slug":"cross-browser-png-transparency","status":"publish","type":"post","link":"https:\/\/htmlcssjavascript.com\/web\/cross-browser-png-transparency\/","title":{"rendered":"Cross Browser PNG Transparency"},"content":{"rendered":"

(I wrote this post at my old job. Since IE6 will be around for some time to come, the techniques in use here are still useful going forward as more and more designers are going to want to use Transparent PNGs in their designs. I’m going to add onto this article at some point in the near future to fully flesh out all the possibilities. See PART 2 of this article<\/a>)
\n
\nWith the announcement that Internet Explorer 7 would have PNG alpha channel support, there was much rejoicing in the web design and development space (okay, at least in my corner of that space.) The ability of the PNG format to present true transparency and variable opacity has been one of the most tantalizing untapped features out there. Anyone who\u2019s ever worked with transparent GIFs for more than ten seconds should automatically know of what I speak- stack two of them or put one on a background that isn\u2019t matched to it and things start to get ugly in a hurry. IE7 looks like it\u2019s finally going to hand out some native PNG goodness. Someone buy Redmond a beer.<\/p>\n

I mention \u201cnative\u201d support because IE, since 5.5 (which was released 475 years ago, I think) has been able to display PNGs with all the neat bells and whistles. The thing is, to take advantage of that ability developers have had to cross over into a land of nonstandard and somewhat confusing code.<\/p>\n

Personally, I shied away from it for longer than I probably should have for that very reason.<\/p>\n

All that changed recently as we had a tool tip design for a client that pretty much demanded full alpha PNGs. We looked at the design and thought, \u201cthat looks really nice, we should see if we make that work.\u201d It fell to me to make it work in IE6, the target browser for the implementation. We also targeted Firefox to ensure that the styles (as well as the rest of the application) would work on a standards-compliant browser.<\/p>\n

As you might have guessed by the fact that there\u2019s a tutorial in front of you, it worked (better than expected actually) and the process was interesting enough that I thought I\u2019d share the experience. I\u2019ve mocked up a few simplified examples that should cover all implementation variations in a way that is easier to digest than the full blown implementation.<\/p>\n

Firefox: As a formality, I\u2019ll touch on getting this to work in Firefox\u2026 Firefox\u2019s implementation couldn\u2019t be more straightforward. Simply source the PNG you want to use in an <IMG> tag or in a standard CSS background property declaration. Simply insert the image as is or apply that style, the same way you would apply any other style to a suitable HTML Element and voila you\u2019ve got a transparent image.<\/p>\n

Internet Explorer: Where the Firefox implementation was straightforward, the IE version is anything but. For starters, if you have any hopes of producing fully standards compliant code and don\u2019t want to use any browser dependant hacks or extensions look away now. The following system uses all sorts of things that folks obsessed with code purity might find distasteful. Personally, while I would love to produce nothing but \u201cpure\u201d standards compliant code (and I do when I can); there are shortcomings on both ends (both in browser compliance and in the design of the specifications themselves) that get in the way.<\/p>\n

It\u2019s not something I lose any sleep over.<\/p>\n

Simple Image Replacement<\/h3>\n

Here\u2019s an example:
\n