As you know IE versions below 6 do not support png transparency. This plugin designed to fix that problem by applying appropriate filters to user specified elements, while keeping all element tags intact.

Plugin works well with both img elements within the DOM and css properties specified externally.

• It is chainable.

• Unlike some other png hack solutions, it does not replace/hide any of your html tags.

• You can revert applied changes using .iunfixpng().

• Extremely easy to use!

Known limitations
(I don't have solutions for those listed below yet - CSS features that are lost when the fix applied)

• Always defaults to "background-position:top left" and you cannot reposition it.

• Unable to perform "background-repeat:repeat-y" or "background-repeat:repeat-x" on a target.

• For the hack to work your item needs to be visible.


• Download jquery 1.2.1. or above and of course ifixpng.

• Save pixel.gif to images/pixel.gif.

• And finally initiate the plugin. See below. I used iMakePostable to make code below viewable).

// apply to all png images

// apply to all png images and to div#logo
$('img[@src$=.png], div#logo').ifixpng();

// apply to div#logo, undo fix, then apply the fix again
$('img[@src$=.png], div#logo').ifixpng().iunfixpng().ifixpng();

// apply to div#logo2, modify css property and add click event
$('div#logo2').ifixpng().css({cursor:'pointer'}).click(function(){ alert('ifixpng is cool!'); });;

Demo 1

Demo 1

Apply ifixpng to image with id #logo.

<img src="/uzhana.png" id="logo" style="border:2px dashed #FF0000;margin:3px;" />

click here to toggle ifixpng/iunfixpng
}, function(){

Demo 2

Demo 2

<img src="/uzhana2.png" id="logo2" style="border:2px dashed #FFF;margin:2px;" />

Apply ifixpng to image with id #logo2 and chain css property as well as click event.

$('#logo2').ifixpng().css({cursor:'pointer'}).click(function(){ alert('ifixpng is so cool!'); });

Demo 3

Demo 3

<div id="nice" style="width:379px;height:117px;border:2px dashed #FFF;
            background:url(images/ifixpng-logo-writing.png) no-repeat;"></div>

You can specify location of your pixel image manually too.
Apply ifixpng to div with id #nice.


Demo 4

Demo 4

<div style="text-align:center;">
	<div id="dude2" style="background:url(images/ifixpng-funny-dude.png) 
                    width:225px;height:220px;border:2px dashed #FFF;">
            <a href="http://www.khurshid.com" target="_blank">www.khurshid.com</a>
            <br />
            <a href="http://www.jquery.com" target="_blank">www.jquery.com</a>

Links works inside png fixed area


Jason from www.consil.co.uk
J. Zaefferer - bassistance.de

Thanks you very much to those who helped me to perfect the plugin, let me know if I missed anyone :)

consil.co.uk for identifying issues when base tag

• Fil, for making it compatible to work with images with additional parameters. (.png?43899)

• maserG, added support for working with sites implementing mod-rewrite (url-rewrite)

• J. Zaefferer & jonahfox, when specifying URL via CSS, quotation marks are optional match(/^url\(["']?(.*\.png)["']?\)$/i)

• J. Zaefferer: bassistance.de for ideas taken from tooltip plugin

Site using the plugin

Let me know about the sites using the plugin, if you know any.

Online catalogue of Uzbek craft




Please feel free to contact me at jquery[at]khurshid[dot]com.