My Drupal Blog

Sounds like a fun recipe huh? Well, having tried (and failed) previously to get this combination to work properly, I recently did some work for a client which demanded that .png files (Portable Network Graphic - image files which have transparent bits) were both used and looked correct in Internet Explorer 6.

Basically, I wanted to accomplish four main things:

• I wanted a real .png file with full transparency to look correct in IE6, and behave as it’s supposed to (i.e. letting you see some or all of what’s beneath it).
• I wanted to achieve this using only CSS – no Javascript, no PHP, no Flash, and no other trickery.
• I wanted this to work for background .png files, that is files which are called from the style.css file like so:
  #div_1 {
  background-image: url(images/druplicon.png)
  }.
• I wanted the solution to be as tidy as possible.

The trouble is that if you just try to load a .png into IE6 normally, you get the following outcome:

Ouch!

After some googling around, and a bit of trial and error, I came up with a solution which satisfies all of the above criteria. Here’s what I did: