All in the <head>

– Ponderings & code by Drew McLellan –

– Live from The Internets since 2003 –

About

Sleight Update: Alpha PNG Backgrounds in IE

31 May 2006

About three years ago, I published a hack for Youngpup’s Sleight script for enabling PNG transparency in Internet Explorer. If you’re not familiar with the issue, IE doesn’t natively support alpha transparency for PNG images, but does have a proprietary ‘filter’ that can be applied to achieve the same effect. Youngpup’s script is a drop-in solution for applying the filter to PNG images in a page. My hack enabled the same to be true for elements with PNG background images.

The content on Youngpup’s site has come and gone a little over the years, so I got out of the habit of following for updates. Today a reader alerted me to a new version of the script – the main new feature being the ability to monitor state changes. This is handy if, for example, you have an image that you’re swapping in and out with JavaScript, like an image rollover. The way Sleight works is to swap out the original image for a transparent GIF, and re-apply the image using the filter. Obviously then if any other scripts on the page attempt to change the src of the image you’ll end up with a strange layered effect. (Hmm .. that could be useful for something). As the original article I published three years ago has consistently been one of the busiest on this site, I figured it was probably worth updating my bgsleight hack to match.

I’m not sure how useful it is with background images, as these sorts of swaps would usually be done in the CSS with the use of the :hover pseudo class, or similar. In those cases, the script won’t be triggered, as it’s watching for property changes which typically only get fired by a scripted change. With a :hover there’s technically no change to the object. As IE has poor support for pseudo classes on much more than links, I guess this could be useful for someone.

The only other point worth making is that my hack is rather more expensive to run than the original. Whereas for inline images it’s possible to loop through only the document.images collection (remember we’re talking IE-only here), PNG background images could be applied to any element in the page. Therefore, I end up looping through document.all. If you know you’re only using PNG backgrounds on a certain type of element (li is common), you may wish to edit to do perform a quick document.getElementsByTagName() and loop through that instead.

Anyway, I’m sure someone will find this useful. As before, 99% of the code is Youngpup’s, not mine. I’ve just hacked at it a bit.

Download bgsleight.js

Implementation is easy:- just link the file into the head of your page. The script looks for a transparent GIF called x.gif, so you’ll need to make sure that’s in place, or edit the script accordingly. If you have other scripts on the page, lookout for onload conflicts. Any problems or questions, feel free to use the comments below, but I can’t promise any support.

Update: the latest version of this script, along with more detailed discussion of the subject, can be found here: Transparent PNGs in Internet Explorer 6

- Drew McLellan

Comments

  1. § Joe C:

    Hi – nice hack – just what I was looking for (if it is what I think it is) – but how does the x.gif have to appear? Is it just a blank document, like 1×1px?

  2. § Drew:

    Joe C – that’s right. A transparent 1×1 GIF is ideal.

  3. § Rosano Coutinho:

    So wait, this lets you have transparent PNGs in {background: }using IE?

  4. § John Faulds:

    Hi, just trying out the script on a page and it seems to disable all links in IE5.5 if I have a background image on the body. It doesn’t appear to be a conflict of styles, because I’ve removed all styles except the ones for the body and the links are still disabled. If I remove the background image, it works, so for now I’m using an IE CC to serve IE5 no background image.

  5. § Drew:

    RE: clickable links, see this comment in the original thread.

  6. § John Faulds:

    a { position: relative; } doesn’t seem to make any difference in my case.

  7. § Geoff:

    Hello,

    I think im being silly here, but, im using 32bit png images both inline actually in the html page and also calling a 32bit png file for a background of a div via CSS (external file) will this script work with the above configuation???

    I have added a 1×1 transparent gif in to the same folder as the script configured it to use the same name but still cant get the css called backgrounds to work in ie. Any suggestions?

  8. § Geoff:

    Wooot Woot. figured it out just needed to specify the height of the png file within my css dec. problem resolved.

    Good work y’all

  9. § Kary:

    Iam with Joe really great hack, but is it search engine friendly AKA Google Yahoo MSN?

  10. § Brad:

    Drew. Thanx so much for your efforts. I have an image in my mind as to how I want my site to look and it really requires the use of png for me succeed. Unfortunately I understand almost nothing of scripting and such and am on my own with the site I am admining/modding/skinning/and anything else of technical nature. Would you please have mercy on me and explain in lamens terms how to use this js. I’ve been trying to figure this out for weeks now and I’m simply at wits end.

    On behalf of all inexperienced people of the world…

    Please please please!

  11. § Chandler:

    I altered up bgsleight.js enough to make it compatible with sleight.js, in order to use both at the same time. The bgsleight code seems to be doing its job in the navigation bar of my site, but not in normal s where I have a gradient placed. Any suggestions?

  12. § Chandler:

    I altered up bgsleight.js enough to make it compatible with sleight.js, in order to use both at the same time. The bgsleight code seems to be doing its job in the navigation bar of my site, but not in normal divs where I have a gradient placed. Any suggestions?

  13. § Brad:

    Hey there Chandler. I had a problem getting both scripts to work together so I put one of the scripts in the head and one in the body.

    I hope that helps you. Seems to be working just fine for me.

  14. § James:

    A little help please I must be close.
    I can see the png images pop in then readjust to the transparency. I have one images that is in a static image tag… the other is in a CSS tag. The image in the CSS ends up stretched but looks transparent. Any ideas here is the CSS information. Any help is appreciated. TY

    #Backgrnd {
    position:relative;
    background-position: top left;
    background-image: url(templates/TalonATA/images/backLogo.png);
    background-repeat: no-repeat;
    width: 90%;
    }

  15. § vidman:

    Great script and easy to install.

    However, is there any way to get this script to show a background image tiled and not stretched to fit the div?

    I’m guessing it needs the image size specified but I don’t know how to do that with a background-image.

    Other than that rather big problem, it worked a charm for me.

  16. § Nice Paul:

    Hi Drew, Looks like a great and very useful script!

    I tested both background and foreground transparencies with only bgsleight.js installed, and realised that for both to work I’d need to use both bgsleight.js and sleight.js.

    Unfortunately the two scripts conflict with each other and cause the first one specified in the code to be ignored. Do you have any suggestions?

  17. § adam tracksler:

    I too need to find a fix to use both the sleight and bgsleight in the same document.

    PLease, pretty please.. can someone tell me the unified sleight theory of PNG-ness?

  18. § Drew:

    OK, this version is now namespaced so should work alongside the original sleight script. Be sure to link it after the original script in the head of your page.

  19. § adam tracksler:

    the sleight/bgsleight combo seems to mess up my links, for some reason only in IE, the links only activate in the top 20 pixels or so. I tried using the updated bgsleight, but it did not work, it didnt even make my bg’s transparent. Can someone please help?

    http://www.hamlettinstruments.com/beta/

    Thanks, ad

  20. § Eric Willis:

    Hi,

    Just a quick tip—
    I needed background PNGs to be transparent and not stretch. I read a lot of places that the sizingMethod property must be set to ‘scale.’ This isn’t true, as far as I can tell. You can set it to crop per the specification (http://msdn.microsoft.com/workshop/author/filter/reference/properties/sizingmethod_1.asp) and it won’t stretch the background image.

    Hope that helps someone,
    Eric

  21. § Ryan:

    Eric’s solution worked great for me. This gets images that shouldn’t be scaled working great!

    Thanks Eric (and Drew of course).

  22. § Ian:

    I’ve managed to change the scaling method from scale to image so it doesn’t stretch it, but, I’m setting the bg image on the body tag and have the following:

    background: url(/assets/images/bg_slash.png) #D7EAF7 repeat-x top;

    but it doesn’t repeat. What am I doing wrong?

    Cheers, Ian

  23. § Dream Phan:

    Would you please help me change the hack a little bit so that it will avoid using the hack if the browser is IE7 .

    I’m having the problem with background png getting stretched in all IE versions. which may be solved without using sleight but my website is for IE6 people :(

    Thanks a ton in advance

  24. § Davi:

    Thanks alot for the hack man, I was going crazy with this :)

  25. § konstantinos:

    this is great! exactly what i was looking for. there is one drawback though… i am using a swf menu inside a div, which is inside a div, ontop of the png background… and the RollOvers of my swf are not working in IE.!? in FF they are!

    any idea? help? suggestions? ... i am really desperate, site is going online tomorrow and i just noticed this error…

    thanks in advance!

  26. § konstantinos:

    ...just found out myself:
    set the wmode to window instead of transparent!
    wmode=”window”
    that does the trick!

  27. § Kenneth Knudsen:

    Hey!

    I’m not the best at programming :( but i did manage to add the javascript file in my header and made sure that there’s no “onload” conflicts to – I’ve added the x.gif transparent file and done everything i should… i think :/... but the hack is not working ? does this hack support bg .png images in cells ?

    here’s my site, if you want a closer look:
    http://k-knudsen.dk/cv/index.html

    I’m making this site for my exam – my deadline is Friday, so please replay as soon as you can :)

    Thanks in advance
    Kenneth

  28. § Gregory:

    I’m pretty new to web design, but just figured out a fairly quick way to give a table a semi-transparent color against a background image, and it seems to work on all platforms so far. It seems simple enough, maybe there’s a catch I don’t know about yet, or maybe this trick is already known?

    I created a 10×10 pixel GIF with a transparent background and used Adobe Photoshop’s Pencil tool to color every other pixel white. I then set this as the repeating background image for the table cells I wanted to stand out lighter against the image background.

    I’ve just started a new page using this method, you can see it here: http://www.projectpast.org/gvogel/Schumann/Schumann.html

    It seems that there are numerous possible variations: using colors other than white for the solid pixels, using different tessellations to achieve different levels of transparency, etc. For the checkerboard pattern, at least (every other pixel solid, every other pixel transparent), the gif image has to have an even number of rows and columns to blend with itself horizontally and vertically.

  29. § nater kane:

    I put together an update to bgsleight.js to take care of the general background-repeat issue.
    http://www.naterkane.com/blog/2007/03/26/bgsleight/

  30. § Michal Eldar:

    I was soooo happy to find your code, but then I reveal it doesn’t respond to onmouseover/out events – is there any solution for your css png AWESOME fix + handling onmouseover/out events ?!

    Thanks in advance
    Michal

  31. § jorem:

    thanks for the update. this is exactly what i was looking for!

  32. § Ã…ke Johansson:

    I just found a neat non-javascript solution for PNG background images courtesy of Christopher Schmitt

    P.S. There is no fold!

  33. § Beans:

    I’ve been trying to implement this code to fix my png problem in IE and it doesn’t seem to change anything. I’ve tried tons of different png hacks and none of them ever help at all. I don’t know whether I’m putting them in wrong or saving the pngs wrong out of photoshop or what. They’re just regular png 24 files.

    http://www.pinstripepresentations.com/index.php

    Any help at all would be appreciated.

  34. § Kat:

    Great fix – not being able to repeat background pngs has been driving me mad!

    I’ve got a question though – as with all these png fixes there’s a period of time where the png loads in grey before working out the correct opacity. Is there any fix for this? I’ve seen it mentioned that you can set pngs to hidden and put something in the javascript fix to show them as visible once the png fix has been applied, thereby avoiding seeing the grey surround:

    + ”(src=\’” + myImage.src + ”\’, sizingMethod=’fixed’); visibility:visible\”>

    This was something I saw in relation to the PNG fix seen here: http://homepage.ntlworld.com/bobosola/pnginfo.htm

    Does anyone know if this adjustment could be applied to the bgsleight fix?

    Thanks for any help

  35. § Kat:

    I came across this piece of free software today that sort of answers my own question above.

    http://entropymine.com/jason/tweakpng/

    If you open up your pngs in this program you can change the background colour from the ugly default grey to any colour of you choosing. While you still see the change taking place you can at least make it initially match the colours on your website before changing to the transparency.

    Hope it helps

Photographs

Work With Me

edgeofmyseat.com logo

At edgeofmyseat.com we build custom content management systems, ecommerce solutions and develop web apps.

Follow me

Affiliation

  • Web Standards Project
  • Britpack
  • 24 ways

I made

Perch - a really little cms

About Drew McLellan

Photo of Drew McLellan

Drew McLellan (@drewm) has been hacking on the web since around 1996 following an unfortunate incident with a margarine tub. Since then he’s spread himself between both front- and back-end development projects, and now is Director and Senior Web Developer at edgeofmyseat.com in Maidenhead, UK (GEO: 51.5217, -0.7177). Prior to this, Drew was a Web Developer for Yahoo!, and before that primarily worked as a technical lead within design and branding agencies for clients such as Nissan, Goodyear Dunlop, Siemens/Bosch, Cadburys, ICI Dulux and Virgin.net. Somewhere along the way, Drew managed to get himself embroiled with Dreamweaver and was made an early Macromedia Evangelist for that product. This lead to book deals, public appearances, fame, glory, and his eventual downfall.

Picking himself up again, Drew is now a strong advocate for best practises, and stood as Group Lead for The Web Standards Project 2006-08. He has had articles published by A List Apart, Adobe, and O’Reilly Media’s XML.com, mostly due to mistaken identity. Drew is a proponent of the lower-case semantic web, and is currently expending energies in the direction of the microformats movement, with particular interests in making parsers an off-the-shelf commodity and developing simple UI conventions. He writes here at all in the head and, with a little help from his friends, at 24 ways.