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.
Comments
If needed, the browser sniffing can also be replaced by IE 5 PC Conditional Comment.
I’ve tried reading the AlphaImageLoader specs at MS, but they just confused me more.
Help? Please? :-)
As a benchmark, try the page in Mozilla.
Check over the instructions again if you’re still unclear.
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.
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!
Later
That bug has cost me hours... Thanks for the tip.
Has anyone has any success with that?
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
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)
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!
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.
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!
A shame, as this looks like it could otherwise be very useful!
If there are any solutions for this please enlighten me:)
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.
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.
I can now design with confidence again. STUPID IE!
Thanks again for the brilliant hack…
– A
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
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
khkljh
.tinted {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=’Untitled-1.png’);
}
.tinted[class] {
background-image: url(‘Untitled-1.png’);
Has anybody been able to do this? I think I’m simply pushing it too far on this one…
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.
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.
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
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
Thanks!
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
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.)
Thanks a lot. I works flawlessly. I am amazed
Regards
Greg
This works fine for me in IE 5.5 and 6 Win.
Now the links are clickable.
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.
Putting whatever you want on the background in a seperate DIV and specifying a position: for the child elements fixes the problem.
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’
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.
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?
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.
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?
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 ?
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.
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.
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!
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.
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.)
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!
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?
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!
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!!
THANKS MAN, THANKS! for the PNG transp script you linked… i had others but didn’t work with pngs as backgrounds in css… THANKS!!!
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.
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.
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.
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
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
Thank you! I wish the I.E. 5+ browsers wasn’t so buggy.
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.
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!
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