View Full Version : PNG transparency in IE6

01-29-2007, 07:09 PM
This is really important to me, ive been trying to get this working on my site for months, i really hope you guys can help me sort this out.

Basically ive got a semi transparent page background image which is on top of a body background image. This works great in IE7 and Firefox but 40% still use IE 6 so i need a solution to get this working for them.

Ive found this solution:


First upload the iepngfix to your css folder (the following is inside that file)

<public:attach event="onpropertychange" onevent="doFix()" />

<script type="text/javascript">

// IE5.5+ PNG Alpha Fix v1.0RC4
// (c) 2004-2005 Angus Turnbull http://www.twinhelix.com

// This is licensed under the CC-GNU LGPL, version 2.1 or later.
// For details, see: http://creativecommons.org/licenses/LGPL/2.1/

// This must be a path to a blank image. That's all the configuration you need.
if (typeof blankImg == 'undefined') var blankImg = 'blank.gif';

var f = 'DXImageTransform.Microsoft.AlphaImageLoader';

function filt(s, m)
if (filters[f])
filters[f].enabled = s ? true : false;
if (s) with (filters[f]) { src = s; sizingMethod = m }
else if (s) style.filter = 'progid:'+f+'(src="'+s+'",sizingMethod="'+m+'")';

function doFix()
// Assume IE7 is OK.
if (!/MSIE (5\.5|6\.)/.test(navigator.userAgent) ||
(event && !/(background|src)/.test(event.propertyName))) return;

var bgImg = currentStyle.backgroundImage || style.backgroundImage;

if (tagName == 'IMG')
if ((/\.png$/i).test(src))
if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
style.width = offsetWidth + 'px';
filt(src, 'scale');
src = blankImg;
else if (src.indexOf(blankImg) < 0) filt();
else if (bgImg && bgImg != 'none')
if (bgImg.match(/^url[("']+(.*\.png)[)"']+$/i))
var s = RegExp.$1;
if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
style.width = offsetWidth + 'px';
style.backgroundImage = 'none';
filt(s, 'crop');
// IE link fix.
for (var n = 0; n < childNodes.length; n++)
if (childNodes[n].style) childNodes[n].style.position = 'relative';
else filt();



Second, paste this code into your CSS file:
img { behavior: url(iepngfix.htc); }

I adapted this for my site. For the advanced css definitions for the page background i put this code:

behavior: url(iepngfix.htc);

although i did try this:

img { behavior: url(iepngfix.htc); }

However, this doesnt work. I know that the code works when correctly implemented because its working on their site, when i do it doesnt display the semi transparency in the png overlay image at all, its as if the png wasnt there or is totally transparent not semi transparent.

Can anyone help?


02-04-2007, 02:44 PM
I had the same problem too--

basically i realized that the path you pass to behavior property is relative to the page, regardless of where you are declaring the behavior property (inline or in a stylesheet in some other directory)

absolute paths to the files will also work. (e.g. url(/css/iepngfix.htc) etc)

you also need to point iepngfix.htc to blank.gif using the same method. just edit iepngfix.htc file and where it asks for the path to blank.gif, use either a path relative to the page, or use an absolute path to blank.gif.