All in the <head>

– Ponderings & code by Drew McLellan –

– Live from The Internets since 2003 –

About

Sleight of hand

8 July 2003

I’m sure most readers are aware of of youngpup’s Sleight code snippet for achieving PNG alpha transparency in Win IE 5.5+. If not, go look. You may find it useful.

On a project today, we wanted to implement a translucent PNG effect on some dropdown menus. Youngpup’s code only deals with inline images, not background images so I had to roll my own. You can download it. The instructions are just the same as Sleight.

Kudos to youngpup for the neat code, some of which I borrowed, some of which I replaced. It uses browser sniffing, which I’d normally avoid, but I think it’s okay in this context. It should fail gracefully if the sniff goes awry.

Update: The script linked above is now a revised version. See my notes.

- Drew McLellan

Comments

Follow me on Twitter

Tags

  • code

Comments

  1. § spacer Nathan Pitman: We’ve been doing some work on a large shopping site and have made use of Youngpup’s ’ypSlideOutMenus’ on the project. He is indeed a very clever man.
  2. § spacer Marcello Cerruti: I didn’t know that snippet.
    If needed, the browser sniffing can also be replaced by IE 5 PC Conditional Comment.
  3. § spacer Drew: Good thinking, Marcello!
  4. § spacer Bob: Umm... OK, so I’m trying to use this to display PNGs as bg images in Hn tags in my style sheet, and while the PNGs are displaying in IE, they’re displaying with 100% opacity. I’d like for them to be at about 40% opacity to allow the image behind the Hn tags to show through.

    I’ve tried reading the AlphaImageLoader specs at MS, but they just confused me more.

    Help? Please? :-)
  5. § spacer Drew: Have you saved your PNGs with the correct opacity?

    As a benchmark, try the page in Mozilla.
  6. § spacer Bob: Yup, they look great in Moz. Not so much in IE.
  7. § spacer Bob: The page in question is located at www.websol.net/newlayout/ ... I copied your script as-is into the head of the document, and changed the image url in the line ”document.all[i].style.backgroundImage = ”url(’img/bluegradbg.png’)”;” ...
  8. § spacer Drew: That image you changed (previously x.gif) needs to be a regular transparent GIF.

    Check over the instructions again if you’re still unclear.
  9. § spacer Bob: ahh... OK, I missed that somewhere. Thanks for clearing that up! And, I also apologize for using your comment system as a tech support line. This was bad form on my part.
  10. § spacer Rafael: Hi - new to CSS and I’m just building out my site (www.theinspiredjoruney.com) and on the home page I’ve got a PNG at 73% opacity as a background of a table laying over another table’s background image which is not a png. works great in Netscape 7.02 and til now didn’t work in IE 6. Tried your code and still not seeing the transparency effect. HELP please! Help me to get this to work and of course I’ll provide credits to you on the site for your help!
  11. § spacer Drew: Rafael, did you follow the instructions over at youngpup.net?

    There do seem to be funny situations where the IE filters don’t work properly, so it may be you’ve found one.

    Put the page online somewhere so I can look, and email me with the details.
  12. § spacer Rafael: Drew, thanks for getting on this, sorry for the delay - I spent the entire day helping clients all over the place deal with the Blaster worm... all but one client was ok ultimately... and I’m scraping her computer tonight!

    OK So it turned out your solution was PERFECT... MY ”Transparent” GIF was not quite completely transparent- how humbling is THAT to learn?

    You can see the mock-up page I used for testing at www.theinspiredjourney.com/transindex.cfm

    YOU sir, along with YoungPup, are BRILLIANT!
  13. § spacer boogs: Hey cool update, I will link to this. If only we could get tiled backgrounds to work now ;)
  14. § spacer Roshambo: There was an article at AlistApart with a great tutorial several months ago covering this same topic. It’s certainly worth a look.
  15. § spacer Roshambo: After taking a closer look at YoungPup’s workaround, however, I must say that his PNG transparency tecnique is a much better hack.
  16. § spacer Bryant: I’ve tried this with a couple of sites in development, but in IE6, it stretches non-repeated background images to the width of the container div or Hn. Alpha transparency works perfectly, but 80x80 pngs are being stretched to 500x80. Please advise.
  17. § spacer Neff: You sir are a genius - bgslight is EXACTLY what i was looking for - been tearing my hair out with transparency on background images.
  18. § spacer Andy Savidge: You saved my life! I’ve been grinding my teeth for hours trying to work this out... thanks a million.
  19. § spacer Andy Savidge: I hate to litter your blog with ’support questions’ but my hrefs don’t work when placed in a table with the png background on it. Is this just something I’ll have to deal with, or am I messing something up? Click my name for link to page in question... thx.
  20. § spacer Chris: Yeah, I was absolutely amazed at how perfect this solution was, but I too have found that href’s no longer work. Im looking into it, but if you have any insight as to why that may be a problem let me know, thanks! Again, Ingenous work around, if only MSIE would get its act together and do png’s the right way! Later
  21. § spacer Chris: As a brief followup, I noticed that the href is only an issue on the png’s I have custom created. The one that came with the alistapart.com article works perfectly with your method and hrefs. As such I am wondering what I could be doing wrong in making my png’s. I have Macromedia Fireworks Exporting a 32 bit PNG image sized 200x200 color black image with an alpha of 40%. (it works in the other browsers, oh well back to the drawing board, err app :)
    Later
  22. § spacer Chris: Ok, I may be losing my marbles, but I think I have a solution to this href problem. It seems the background image MUST be a single pixel by something if you would like the hrefs within the element to be clickable. I tried the flwr.png, the test.png, and many many other png’s from the various sites that are discussing this issue and ONLY the ones that are a single pixel tall are the ones that both show up and perform href hovers properly. I am testing in IE 6.0.2800 on Win2K, so take it for what it is, but there is some wierd behavior going on here. It seems that the mouse is using the background as the hotspot for anything taller than a single pixel, so it never _realizes_ that it is over a link. P.S. Fireworks at 1 pixel works as well as anything else, so it was not the app :) Good luck! -Out-
  23. § spacer Kirk Bentley: 1px x 1px.... That is the most rediculous hack I’ve seen so far.

    That bug has cost me hours... Thanks for the tip.
  24. § spacer Tom Ta: I’ve been trying to get the JS to also work with png cell backgrounds but to no avail.

    Has anyone has any success with that?
  25. § spacer Tom Ta: This is a followup, it works on png’s that are cell backgrounds also. Great script!
  26. § spacer Tom Ta: Make sure none of the elements on your page have broken links. The script won’t execute and transform PNG’s into their correct opacity until all the elements on the page are loaded. So, any broken links will stall this. Keep this in mind when debugging.
  27. § spacer Clint: Hi Drew,
    Thanks for the help getting over this crazy IE problem. You have gotten closer then anyone else I’ve found to solving the issue completely. I really need to be able to tile my backgrounds though, is there any way to get PNG’s to work with the CSS ’background-repeat’ setting?

    Thanks heaps
  28. § spacer Darrel: I’m missing something. I can get the background image (on a DIV) to show up fine in Mozilla, but nothing in IE. I see a few references to ’the instructions’ but YoungPup only mentions: ———-
    To use sleight, you need to drop the sleight.js file in the head of your document.

    Then make images with PNGs as the source:

    [img src="/img/spacer.gif"> That is all. ———-

    Am I just looking in the wront place? ;o)
  29. § spacer darrel: allright...I figured it out. I need to save them as 32bit PNGs for IE to see them.

    I, too, am stuck on the HREF problem. I can’t for the life of me figure out why IE ’kills’ any HREF that’s inside anything with a PNG background. Ugh.

    So, the 1px ’hack’ works.

    Still, this leaves the unresolved issue that I still can’t make ’soft’ drop shadows. Which is a bummer. Maybe someday we’ll have an IE that works. *sigh*

    In the interim, this solution works for now. Thanks!
  30. § spacer Alan (Rafael) Bleiweiss: I have a valid HTML 4.01 transitional document using CSS (also validated) combined with tables for layout. I’m using a semi-transparent png file as the background image for one of my TD classes in the CSS file.

    To make this work in IE I’m using the previously provided PNG fix script...

    This works great, however when the PNG is referenced, all HREF links inside that TD break, but only in IE 6 - the links still work in Netscape 7x and Mozilla.

    If I simply remove the background-image line from the CSS, the links work, but no png appears of course.

    For reference:

    www.theinspiredjourney.com is the page
    www.TheInspiredJourney.com/scripts/TempSite.css” is the Style Sheet.

    Any help would be greatly appreciated.
  31. § spacer Alan (Rafael) Bleiweiss: RESOLVED!

    When posting this question about the HREFs not working in IE 6, I hadn’t seen the post by Chris!

    Just making my PNG 1 pixel tall now allows IE to both recognize the semi-transparent PNG background AND allow HREF links to work!

    AWESOME!
  32. § spacer Ben: Unfortunately it appears that when using this with certain CSS tricks, there are nasty side-effects. Specifically the image replacement method detailed here results in the PNG scaling to fit the rendered height and width of the element, even if you didn’t want it to. This breaks pixy’s preload-free rollovers (which change the background-position for links).

    A shame, as this looks like it could otherwise be very useful!
  33. § spacer Peter Janes: In a related vein, I’ve used the Alpha filter to mimic CSS3’s opacity property... it saves having to create 32-bit PNG images, and I think it might fix Ben’s problem with LIR as well. I chose this for the Sirens website because the AlphaImageLoader workaround was causing all sorts of other screwiness, like moving the images around that it was applied to (perhaps because the 1×1 transparent GIF is so much smaller than the images it’s replacing).
  34. § spacer Sascha: everything works fine, however, I don’t get a opaque background in IE6/Win if the div is position:relative. It works perfectly, however, with position:absolute. Any ideas?
  35. § spacer dok: does this have a limitation on the number of png’s that it renders per page? cant seem to get all my png’s rendered properly…
  36. § spacer Mike D: I have altogether avoided png’s with transparency, much to my disappointment for the last year until I found this script. BRAVO!
  37. § spacer SubZane: It seems after a few headaces that you must set a with and height on the div containing the background PNG. And properties like align and repeat won’t work either, the PNG will be streched to fit the set with and height and it cannot repeat.

    If there are any solutions for this please enlighten me:)
  38. § spacer d: yes it is true, for the filter to work there has to be a height associated with the div… but not THE height. just A height.

    as msdn states: “The object that the filter is applied to must have layout before the filter effect will display. You can give the object layout by setting the height or width property, setting the position property to absolute…”

    so, you can use the !important hack to make completely flexable alpha-transparency divs:

    div#test {
    auto !important;
    % /* ie fix so alpha-transparency renders */;
    }

    thus far the 100% has worked fine, but you can actually put anything in there for it to work (em or 1px or whatever).

    hope that helps.
  39. § spacer Ron: I had some problems too, with hrefs that couldn’t be clicked. Also with text-input fields. I tried to understand the posts of Chris (20,21,22) en d (38), but without any luck. I have to admit that I didn’t understood the ‘1px’ solution. Anyway, I have also a solution; hope it helps someone:
    The href between begin-div and end-div has an extra pair divs above them and in that extra pair the background-image(‘url’) has been given and in the second pair not.
    Thanks for this site and everybody thanks for there posts.
  40. § spacer Aaron: Sweet merciful CRAP this code saved my butt!!! What a relief to know that I can use PNGs as td backgrounds and stuff in IE…I am using a PNG graphic with drop shadows on a page which has a gradient background! Talk about tricky…

    I can now design with confidence again. STUPID IE!

    Thanks again for the brilliant hack…
    – A
  41. § spacer Karl Bedingfield: Hi there,

    This works great for me apart from one little problem and that is that I have a logo image hidden that is now shown visable when the PNG code is used. When I remove the code the logo is hidden.

    Anyone got any ideas on how to fix this?

    Cheers
    Karl
  42. § spacer Qerub: Any way to support background-position?
  43. § spacer jonnypage: I’m having an issue, it seems to be cutting off after doing the first 11 or so images, and then leaves 1px borders by the other ones. Strange..

    oh, and it only happens with < ie 6 xp-sp2 – looks great with xp-sp2’s ie

    can be seen at www.westmeadows.org/v3/index.html
    the spaces arn’t there when sleightbg is disabled, as can be seen at www.westmeadows.org/v3/nosleight.html

    of course, works fine with ie6 sp2+ and firefox/ mac-ie
  44. § spacer adam: bloody excellent!! top marks to programmers for this. works like a charm. nice one!!!
  45. § spacer snert: Anyone ever figure out how to place links over a full size png for IE?
  46. § spacer snert: update, found a solution. No need for using the 1px hach. If you wrap your text in a div tag inside the div tag holding the background image and set its position to absolute or relative, links work over partialy transparent areas of a PNG. See example below.—————-

    khkljh

  47. § spacer Mike: Love this script and beginning to use it more and more, Ive got just one problem with it. When you go to print out the webpage, it displays the background-image, is there a way around this?
  48. § spacer snert: I’m currently using the CSS workaround for PNG display. So far it seems to work just fine in IE 6 and Netscape 6.2 and 7.2. Just place a div and assign it the class. IE, ignores the CSS with the selector and other browswers ignore the first class. And as i mentioned above, to get links to work in IE, just place a div inside of it with the position of absolute or relative.

    .tinted {
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="/img/spacer.gif"> }
    .tinted[class] {
    "www.gravatar.com/avatar.php?gravatar_id=fe47787e5ed2e1c896bc72439029d9b5&size=60&default=identicon" style="px;px;" /> Seth Thomas Rasmussen: Your script works nicely, Drew, but I noticed something: You don’t need the transparent background image. Simply setting the backgroundImage property to “url()” gets rid of the funkiness.
  49. § spacer v: This page is a really great resource. I’ve implemented snerts suggested way of doing this (comment #48) and then tried to put an inline list (with transparent gifs for the links) inside of a div (with position:relative) and while it appears properly in Safari, Firefox absolutely will not show it.

    Has anybody been able to do this? I think I’m simply pushing it too far on this one…
  50. § spacer Jim Williams: This is great… except I can’t for the life of me figure out the missing href problem. The script works fine, my png’s don’t have the ugly grey background in ie, but all of the links that those images have under them are now no longer clickable (although you can tab through them, so they are still there). I have a 1×1 empty spacer.gif, but that doesn’t seem to work either. Help!
  51. § spacer Ray: This is a great script — with one fault (that I can see). I’ve tried using it for a PNG that would reside in the background of a DIV — in the top & right of that DIV, in fact.

    This works as advertised in all browsers except for IE/Win. The PNG aligns itself to the top left corner of the box, ignoring the CSS. Hmmm.
  52. § spacer Joz: I actually haven’t tried the example here, but I’ve been looking at similar solutions and have encountered problems in the filter function call with the sizingMethod attribute. For my required solution the using the scale value doesn’t suffice and if I try any of the other values (such as image) defined on MSDN, it brakes. Any ideas peoples?
  53. § spacer Colin Shanley: Regarding HREF in DIVs with a PNG used as the background.

    I have found a way to use a bg image of any size using IE’s AlphaImageLoader, but also enabling anchor links within the DIV.

    In CSS, set up the filter in the usual way:
    div#BOXER {
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/img/spacer.gif"> }

    The ensure that children are positioned eiter relative or absolute, e.g:
    div#Boxer* {
    position:relative;
    }

    That’s it! HREF links inside the DIV will now work.
  54. § spacer Tino: Hmm. I can’t get any of your href/background PNG solutions for IE/Windows to work at all.

    Here’s my CSS :::

    #leftwrapper {
    background-image: url(images/left_top_bg.png);
    %;
    px;
    position: absolute;
    top: 0px;
    left: -23px;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/img/spacer.gif"> }

    #testinside {
    position: relative;
    }

    My BODY consists of the parent #leftwrapper and the child inside #testinside with a link inside #testinside.

    Simple enough right? And I thought I followed all the directions above carefully.

    I am able to see the transparent PNG in IE/Windows, but the HREF is still disabled.

    Any ideas??? :) :) :)

    thanks in advance,
    Tino
gipoco.com is neither affiliated with the authors of this page nor responsible for its contents. This is a safe-cache copy of the original web site.