Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Supersleight jQuery Plugin for Transparent PNGs in IE6
jQuery.fn.supersleight = function(settings) {
settings = jQuery.extend({
imgs: true,
backgrounds: true,
shim: 'x.gif',
apply_positioning: true
}, settings);
return this.each(function(){
if (jQuery.browser.msie && parseInt(jQuery.browser.version, 10) < 7 && parseInt(jQuery.browser.version, 10) > 4) {
jQuery(this).find('*').andSelf().each(function(i,obj) {
var self = jQuery(obj);
// background pngs
if (settings.backgrounds && self.css('background-image').match(/\.png/i) !== null) {
var bg = self.css('background-image');
var src = bg.substring(5,bg.length-2);
var mode = (self.css('background-repeat') == 'no-repeat' ? 'crop' : 'scale');
var styles = {
'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + mode + "')",
'background-image': 'url('+settings.shim+')'
// image elements
if (settings.imgs &&'img[src$=png]')){
var styles = {
'width': self.width() + 'px',
'height': self.height() + 'px',
'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + self.attr('src') + "', sizingMethod='scale')"
self.css(styles).attr('src', settings.shim);
// apply position to 'active' elements
if (settings.apply_positioning &&'a, input') && (self.css('position') === '' || self.css('position') == 'static')){
self.css('position', 'relative');

johnantoni commented Apr 14, 2011

You apply it to a section of the page like this:


Of course, if you wanted to fix PNGs for the entire page, you can just apply it to the body element. For all sorts of reasons, it’s better to be specific if you can.


This can be safely reapplied after importing a chunk of HTML via an Ajax request (something I end up doing a lot), and it uses jQuery’s browser detection to only apply it to the appropriate versions of IE, so it’s safe to deploy for everything, or to include inside some Conditional Comments as you prefer.

As always, the script requires the path to a transparent GIF shim image. By default, and almost by tradition with this script, that’s x.gif, but you can specify any image you like:

$('body').supersleight({shim: '/img/transparent.gif'});

Other possible configuration values are imgs and backgrounds (both boolean, default true) to tell the script which PNGs to fix up, and apply_positioning (boolean, default true) to tell the script not to try and fix up some of the bugs around unclickable links. (See the 24ways article for more info on that).


johnantoni commented Apr 14, 2011

another way is to save images as 8-bit PNGs, which should provide a workable solution without need of the plugin although may appear a little fuzzy

Hi, I found one problem: when I put inline it it creates both image with a transparent background and alt (or img name if there is no alt) text as the image doesn't exist. Why there is something like that? Here is the picture: (at the bottom there is a semi transparent background and it works correctly; the picture is from IE7, but the same in IE6, 8...)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment