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

Tags

Comments

  1. § 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. § Marcello Cerruti: I didn’t know that snippet.
    If needed, the browser sniffing can also be replaced by IE 5 PC Conditional Comment.
  3. § Drew: Good thinking, Marcello!
  4. § 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. § Drew: Have you saved your PNGs with the correct opacity?

    As a benchmark, try the page in Mozilla.
  6. § Bob: Yup, they look great in Moz. Not so much in IE.
  7. § 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. § 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. § 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. § 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. § 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. § 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. § boogs: Hey cool update, I will link to this. If only we could get tiled backgrounds to work now ;)
  14. § 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. § 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. § 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. § 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. § Andy Savidge: You saved my life! I’ve been grinding my teeth for hours trying to work this out... thanks a million.
  19. § 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. § 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. § 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. § 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. § 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. § 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. § Tom Ta: This is a followup, it works on png’s that are cell backgrounds also. Great script!
  26. § 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. § 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. § 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=”foo.png” /]
    That is all. ———-

    Am I just looking in the wront place? ;o)
  29. § 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. § 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:

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

    Any help would be greatly appreciated.
  31. § 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. § 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. § 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. § 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. § 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. § 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. § 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. § 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 {
    height: auto !important;
    height: 100% /* 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 (height: 1em or 1px or whatever).

    hope that helps.
  39. § 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. § 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. § 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. § Qerub: Any way to support background-position?
  43. § 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. § adam: bloody excellent!! top marks to programmers for this. works like a charm. nice one!!!
  45. § snert: Anyone ever figure out how to place links over a full size png for IE?
  46. § 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. § 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. § 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=’Untitled-1.png’);
    }
    .tinted[class] {
    background-image: url(‘Untitled-1.png’);
  49. § 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.
  50. § 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…
  51. § 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!
  52. § 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.
  53. § 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?
  54. § 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=’boxer_bg.png’,sizingMethod=’scale’);
    }

    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.
  55. § 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);
    height: 100%;
    width: 270px;
    position: absolute;
    top: 0px;
    left: -23px;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’left_top_bg.png’,sizingMethod=’scale’);
    }

    #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
  56. § Tino: nevermind. :)

    I actually found a workaround to my problem (above) without any fancy scripts, etc.
    I just put my href content outside the div tags where I used the background PNGS, then I positioned it OVER the backgrounds, etc. Then I used some variations on z-index so that the div tags with the href stuff is always in front.

    Voila …...

    I hope this helps some of you, at least. Feel free to email me if you need help.

    Tino
  57. § Brett: I used the script, and it was working great for the background images, however, however once the script loads on my page I can not click on any links, not can I click into any text boxes. This only happens in IE, and only when I use the Script, any ideas? my stite: www.landsofeden.com/cgi-bin/eden2/ikonboard.cgi?act=Portal
  58. § geekgirljess: I think I love you. This is exactly what I needed, and what I’ve spent hours trying to get working. :)

    Thanks!
  59. § Paul Collins: This is brilliant and it has worked perfectly for me. The only problem I have encountered is that the IE6 pop-up blocker when set to default comes up with an error until you tell it to display the PNG’s.

    I guess that this is because it uses script to add an active X component. Has anyone else encountered this and/or found a solution? I have pop-up up blocker settings on Meduim at the min, which I think was the default?

    Thanks
  60. § Andrew: When I added the sleightbg.js to my page the png worked however, all the links on the page ceased to work. I thought it might be a javascript conflict, but I took out all the javascript and the links still did not work. Any ideas?
  61. § Paul Collins: Just thought I would update. I discovered that this only occurs when I open the page on my desktop. When I view it on a server I don’t get the pop-up blocker at all. Not sure why this is, but as long as it works, great stuff…
  62. § David J Wallace: PNG’s, huh.

    This is a good script, and JavaScript’s all fine and dandy but I’ve been trying to implement PNG tastiness to
    Dave Shea’s CSS Sprite using only CSS, I’m nearly there, but have so far come up with this situation (check out the above link to get into context for the following):

    Using a semi-transparent PNG as an initial styled background for a UL, the LI in this UL each have an A tag inside, an A:hover state is created for each LI which consists of a background (repeated 1×1.PNG which is semi transparent) to partly obscure the UL background. The PNG filter employed is:
    a] set background as a PNG for Mozilla etc..
    b] use * html to reset LI:hover’s background to ‘none’
    c] use * html to apply filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’mid.png’, sizingMethod=’scale’); for WinIE5+ browsers.

    There’re two issues here, firstly is the background positioning which is reset once the filter is applied to WinIE, that doesn’t matter so much in my example because the 1×1.PNG repeats using sizingMethod=’scale’. But in other cases where a positioned A:hover background is required – it wouldn’t work.

    Secondly, but perhaps more importantly is the ‘clickable region’ of the A. Which is only the parts of the physical image to be filtered on :hover – instead of the entire 100×200 A area, which flickers randomly and in general is not usable. This is an IE issue, check the below link out in both Firefox & IE6 to compare:

    This is my humble example

    After having come so far without scripting, I’d quite like to solve this problem, I’ve looked at a bunch of hacks and I’ve read a bunch of scripts, but basically almost all of the steps are here and chances are I’m missing a couple of steps or some fundamental rule.

    Any input would be great, because a proper CSS Sprite Menu/Imagemap made up of properly filtered background PNG files would be pretty cool methinks.

    Note: The above CSS transparency hack is prepared to leave MacIE5 (but I still care about you, MacIE5) with good old 100% opacity images, as in not filtered at all. I’m prepared to accept this as a casualty because of MacIE’s lack of CSS background transparency support (as opposed to native opacity support.)
  63. § Greg: GREAAAAAT. So much better than this of youngpup’s
    Thanks a lot. I works flawlessly. I am amazed
    Regards
    Greg
  64. § Reed: Ok. I love this script. I don’t understand one thing though. I set a .png image as a cell background but it isn’t repeating. Do I need to make it super tall or is there a way to make it repeat infinately and where do I put it? I am going to keep looking through these past posts but if anyone can email me with the answer I would appreciate it. Thanks again for this great code.
  65. § Kero: Drew, I checked youngpup’s site but instrucions are gone and I can’t make your script work on my site. Can you provide a little how to or instructions, please?
  66. § BearBuddy: The links in the div with the transparent background work by simply adding position: relative to the tag of the links.

    This works fine for me in IE 5.5 and 6 Win.
    Now the links are clickable.
  67. § daniel: like Sascha above (post number 34) for me when i use “absolute” it works, but when i use “relative” it doesn’t.

    i admit, i’m not actually using the js code on this site. (at this point i’ve tried so many pieces of code pulled from so many places i feel like i’m going to cry.) but i’m pretty sure whatever i have in there now SHOULD work, (as it seems to work on other sites) but for some reason i get the same problem Sascha did with this code. so i am left to believe the problem is not with this or the other js hacks, but with some other weirdness that effects this hack and others.

    has anyone encountered this oddity and found a fix?

    you can see the problem here:
    http://www.wompedy.com/bw/index2.html
    (the css is all in the html, and i commented out what all the styles do to make it easier to make sense of)

    oh, and obviously this page looks fine in Safari and Firefox, it’s just IE/Win where it craps out.

    thanks so much in advance if anyone can help.
  68. § e: I cannot get this to work. There are no instruction on the young pup sight. I’m new to javascript. Can someone please help. My png file is navbar.png where do I put it? Can someone provide step by step instructions or post a site that uses a ong as a bg image in a ul list?
  69. § Brian: I just don’t know what to do with this code because I am new to coding. Would someone please, please walk me through what to do in Dreamweaver to put this code into action? Thank you.
  70. § Rene: The HREF-not-working bug also occurs if you apply an AlphaImageLoader filter straight to the BODY tag.

    Putting whatever you want on the background in a seperate DIV and specifying a position: for the child elements fixes the problem.
  71. § Tom: Anyone know how to use NON-repeating PNG in divs larger/smaller than the background image? This script seems to cause background PNG images to stretch to fit.
  72. § bearbuddy: Tom,
    You need to change sizingMethod to ‘image’ into the js to keep the background image from stretching.

    If the background png is stretching you have sizingMethod=’scale’

    you need

    sizingMethod=’image’
  73. § Tom: bearbuddy,

    Thanks. I did eventually try that. I guess what I really need is the ability to do both types of sizing methods. I’ll try to add a conditional statement based on the file name and see if I can apply the sizingMethod on a image-by-image basis.
  74. § John: Ok, it appears that placing the backbround image in a seperate div inside the div with the link will enable the link to work, but that eliminates the possibility of manipulating the image on a rollover, i.e. changing the image or moving the background position. Is there any method that enables links while maintaining control over the background in a hover state?
  75. § Hrunting: If you place the background image within a non-positioned div (that is, a div with either position: static or no position: setting at all) and then place your link within that div and position the link (either relative or absolute), the link will work. As far as I can tell, that’s the most direct solution. The background div can’t be positioned. You can give it height, width, margin, padding, whatever you want .. just don’t give it position.
  76. § dan: and where pray tell might i find these instructions? thanks. -D
  77. § carolina: trying since yesterday to get the script working with bgsleight.js but just can’t find it.
    I have a table with a background that is transparent round the edges, but everytime when the script does it work, my background disappears. When I check it, it seems to be replaced by x.gif the ‘transparency’.
    Has it something to do with saving my png wrong or is there something I have to do extra with the script?
  78. § Lucien:

    I’m working on a site with a background image (www.sculptors.org/fi). On the homepage I have a table with only text which scrolls over the fixed background. Now I have a table background of the same image – but faded – which scrolls with it. But – I would like the table background to be semi-transparent, so that only the table and text scroll, while the table background only fades the body background where it scrolls over it.

  79. § iomatic:

    So does this function need to live in the normal sleight.js, or should you just reference it on its own in the head tag, with the browser check function?

  80. § theBrain:

    I have downloaded your script and linked it in my tag. Then I replaced the x.gif with my spacer.gif. The transparency with png is working on IE. But now, the background png images, that are in my css file, are not appearing at all in IE 6. What did I wrong, ore what do I need to do more ?

  81. § John:

    I’m glad I found this great discussion. You saved my life. Chris, your research of background PNG as 1px width has saved my from a depressive headache, trying to put the workaround to work with the links.

    Thanks again.

  82. § Roger:

    I read somewhere that adding “a { position: relative; }” to the CSS solved the unclickable href problem. That was using another script which I couldn’t get to work, but it may work here. Thanks for the script, it works great.

  83. § Chris:

    PNG FIX FOR UL LISTS: ulSleight!

    For those who wanted to use PNG transparency for the UL list-style images in IE, here is a fix!

    1) Download bgsleight.js at the top of this page

    2) rename the file ulsleight.js

    3) Wherever it says backgroundImage, change this to: listStyleImage

    4)Wherever it says alphaBackgrounds, change this to: alphaBullets

    5) Remove the line: document.all[i].style.listStyleImage = “url(’/assets/images/x.gif’)”;

    6) Save and upload, and include the .js file in your page the same way you would with Sleight. Voila!

  84. § Barr:

    THis script has done some wonders for my site, but I am only halfway there because it is also giving me some serious problems. The site I am working on is at CLICK HERE (for some game developers).

    In IE the transparent PNG images display perfectly, but it scales and stretches certain images and of corse I’m also having the problem with my links not working in IE.

    Also, if I change the script to contain sizingMethod=’image’ then nearly my entire website disappears, so that’s clearly not a solution.

  85. § Matt Linder:

    Tom:

    I apear to have the same needs that you do:

    [quote]:”I guess what I really need is the ability to do both types of sizing methods. I’ll try to add a conditional statement based on the file name and see if I can apply the sizingMethod on a image-by-image basis.”

    I have a background design that is cut into 3 pieces…top.png, middle.png, and bottom.png. I need the top and bottom to repeat only once, and to align to bottom and top of their divs respectively. The middle however needs to repeat down the page to allow for page flexing. This would require top and bottom pngs to use sizingMethod=’image’ while middle used sizingMethod=’scale’.

    Any help would be great!

    (note: This thing is genius! Pure genius! I’ve been looking for something like this for a while now.)

  86. § Redza:

    Roger mentioned adding {position: relative} solves a problem. I was having this annoying flicker in IE when using background image for lists. I know the suggesting is unrelated but adding position solves this problem in a flash. Thanks!

  87. § Chandler:

    I’m having trouble running both the sleight.js script and the bgsleight.js script in the same index.html page. Whichever one I run first on the index.html page, the second one overrides it and somehow it gets cancelled out. They work properly if I run one at a time, but I need both. Any suggestions? Do I need to change some variable names or something within the javascript files?

  88. § damon:

    Hey Chandler,
    I just had the same problem … it would make EVERY image on my page blank when trying to run both … so for the BG hack here, I just changed every variable and function name by adding a “2” at the end of each one :) Looks like it works fine now!

  89. § Daniel Kedinger:

    MANY THANKS for your script. I have been using the sleight fix for a while, but was sad that I couldn’t use it for backgrounds. THANKS AGAIN!!

  90. § Manuel:

    THANKS MAN, THANKS! for the PNG transp script you linked… i had others but didn’t work with pngs as backgrounds in css… THANKS!!!

  91. § Kris:

    A modification to easily allow no scaling, or skip element altogether (modified functions only):

    //found isClass on the web somewhere, modified slightly
    function isClass(element, sClass) {
    sClassName = element.className;
    re = new RegExp(sClass + ”( *|,?|,? *| *,? *| *,?|$)”);
    if (!sClassName) return false;
    return re.test(sClassName);
    }

    function fnLoadPngs() {
    var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, ‘’);
    var itsAllGood = (rslt != null && Number(rslt1) >= 5.5);
    for (var i = document.all.length – 1, obj = null; (obj = document.all[i]); i—) {
    if (itsAllGood && obj.currentStyle.backgroundImage.match(/\.png/i) != null) {
    if (!isClass(obj, “skipsleight”)){
    fnFixPng(obj);
    obj.attachEvent(“onpropertychange”, fnPropertyChanged);
    }
    }
    }
    }

    function fnFixPng(obj) {
    var bg= obj.currentStyle.backgroundImage;
    var src = bg.substring(5,bg.length-2);
    if (isClass(obj, “noscalebg”)){
    var sizeMethod=”crop”;
    } else {
    var sizeMethod=”scale”;
    }
    obj.style.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’” + src + ”’, sizingMethod=’”sizeMethod”’)”;
    obj.style.backgroundImage = “url(x.gif)”;
    }

    usage:
    set a class of noscalebg on the element if you don’t want it to stretch the background, set a class of nosleight if you want to skip the element entirely.

  92. § Benjamin:

    I have no clue what I am doing wrong, but I tried going over to Young Pup’s site and it looks like he/she may have pared down the instructions because all it says is add it to the of the document now and that doesn’t work at all.

    Do you happen to have the instructions that may have once been there so that I can look them over? Sorry I am not very experienced in this sort of stuff yet, so it is slow going for me to determine what is going on.

  93. § Benjamin:

    I figured out how to make the script work finally, but here is the next problem. I am getting that error that others seem to be getting with this script in which the background images stretch to meet the dimensions of the DIV’s. I did notice that Kris up there posted a “fix” for this issue, but I implemented what he/she posted and got no results. Broke the script overall. So I am wondering if anyone else has had any luck fixing this.

  94. § Rob:

    i copied the functions over to fix the stretch problem, cheers Kris, however, now my background is vertically aligned and wont stay at the bottom..

    Anyone got any ideas about this?

    btw benjamin, make sure you change all the “s for standard double quotes when you copy the functions over

  95. § Kris:

    As regards the unclickable link issue, I had a similar problem when using a PNG drop shadow in the main div for a page I was developing, it killed all links below about halfway (in actual fact, what I think was happening was that the generated transparency from bgsleight was being overlayed above the links, since you were still able to tab to them).

    The noscalebg modification I posted above seems to have sorted this. (By placing it on the element with the PNG drop shadow).

    I stuck the full source on here:

    http://bertpotato.googlepages.com/bgsleight

  96. § Del:

    Thank you! I wish the I.E. 5+ browsers wasn’t so buggy.

  97. § Stephen Bigelis:

    About the killing of links: Add “position: relative;” to all links that are contained within the div (or any sub divs) that has the background png.

  98. § Dan Doezema:

    TAGS: Click Fix, A Fix, Link Fix

    Ok this took a bit but I figured out (part) of this un-click-able problem…

    If putting a {position:relative} is not working for you don’t get upset. This might solve your problem =) if the div with the background has a “position:relative” property attached to it, detach it. Place another div inside that div with the “position:relative” property on it and place your content in that div. Problem solved (for me anyways.)

    Let me know if this helped you!

  99. § kelsey:

    Yet another modded version – hacked sleight.js into bgsleight.js in order to have one script to handle both foreground and background png’s.

    Download my new, enhanced and properly named frankensleight.js ;)

    http://wiredance.blogspot.com/2007/09/bgsleight-sleight-meet-frankensleight.html

  100. § Henrik:

    Seems like we can get around the “not-able-to-click” in ie6 if you attach the onclick event by javascript after onload, then explicitly set on the element in question. Could easily be built into the script.
    Haven’t finished my testing yet but it looks really promising.

  101. § Amrita:

    I am implementing iepngfix for background png image but unfortunately background-position:right is not working. Any solution for that?

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.