Simple solution: PNG-24 alpha transparency on IE 6

This solution only uses CSS and doesn’t involve creating additional images other than the single source PNG-24 file. The point is to put the image in a div, using IE specific “filter” extension for IE6 only and background-image for other browsers only. I’ve tested on IE6/7, FF3.5 and Safari.

HTML:

<div id=”header”>
<div id=”hdr_content”><div id=”hdr_logo”></div></div>
</div>

CSS:

#hdr_logo{
background: url(“images/logo_24.png”) repeat-x;
/*IE6*/
*background: none;
width: 191px;
height: 34px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/logo_24.png’, sizingMethod=’scale’);
}

About these ads

One Response to “Simple solution: PNG-24 alpha transparency on IE 6”

  1. Original Hack Says:

    Ah. The original hack that started it all. There are now two newly discovered approaches to this problem that don’t involve any hacks:

    http://cubicspot.blogspot.com/2010/01/transparent-png8-is-solution-to-ie6.html

    http://cubicspot.blogspot.com/2010/03/pseudo-transparent-24-bit-png-in.html

    I’ve gotten great mileage out of PNG8. The other approach is useful too.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Follow

Get every new post delivered to your Inbox.

%d bloggers like this: