Cool! Never knew it could be done that way.

oi..hongkiat..i linked u to my blog :) good stuff…hitswhore!

Yea I couldn’t be bothering doing to to my site, I’ve got so many PNGs on there any majority of people use Firefox and soon IE7 so if your lazy.

There are a few drawbacks to this method.

The first is that this is an ActiveX filter, so people who have security features blocking ActiveX controls might have a problem seeing it.

The other is that if you want to put any information inside the div where you have the png as a background, it won’t show up. This AlphaImageLoader puts a mask over the entire div that it’s applied to, so any fields that are interactive won’t be able to be accessed, such as form elements.

The way to get around this would be to use the following structure:

#outerdiv { positioning of background and interior information }

#middlediv { AlphaImageLoader script with png as background, no positioning }

#innerdiv { positioned inside the above two divs, with your information }

The innerdiv’s relative/absolute positioning will cause it to float above the background div, letting you get to text fields or form buttons. The outerdiv will let you position this entire thing so that you can move it around the page.

Hope this adds a little more for those trying it out.

Thx for the tip.I was looking for it .

Adam:Firefox is soon to be taking over. This is to cover up the loophole of IE6

Ryan: Your method works too, and thanks for providing another alt solutions to this.

…and it doesn’t validate :-(

I just make my code W3C compliant. If someone wants to use a non-compliant browser, their loss.

Here’s some more info on what I was talking about:

http://spiltmilkmedia.com/ryan/blog/?p=221

Love it, but how can I implement this on an enterprise level? I know I can make my graphic designers drool if I tell them I can seamlessly integrate all those transparent gradients they want to use, but isn’t there a better way than creating 3 DIVs with individual CSS definitions? Can we at least use all this code in the ?

The BODY, that is…

You only need three divs if you want to position the element, and then also have some interactive elements inside.

If you just want text, don’t worry about the fact that the AIL filter will mask your div, and just use one.

Doesn’t IE 7 handle .png transparencies OK?

seriously – WHY ON GOD’S GREEN EARTH would you bother with this?
look at the fat chunk of shit that you have to maintain now as a result of this senseless hack.
even maintained a site that uses this “trick”

no thanks – stick to something simpler – or do a better job when designing.

you’re asking for trouble.

Yes, it is a “shitty” solution – but don’t blame the messenger – this is IE’s fault. It’s a “good” hack that opens up fantastic site builds.

Another downside which is rarely mentioned: there is *NO* way to get alpha transparent PNGs to work in IE using HTTPS (including this hack).

We’ve also noticed some inconsistencies with color using this method as well.

Good hack – but test often and KNOW THE LIMITATIONS.

Well Lazy, I’m not quite agree with your statement. It alwz been a web designer’s dream to have a image format that truly supports tranparency (something better than GIF). no point doing graphics that only cater on the specific background right? Don’t you use gif transparency?

There are a couple hacks in javascript to automatically perform this hack, so that you don’t need to manually maintain css files. For example, have a look at the IE7 javascript hack (http://dean.edwards.name/IE7/). It includes many other “fixes” to fix IE’s shitty engine.

Lazy11: This isn’t a senseless hack, it’s what you have to do to get a PNG transparency to work. I didn’t write IE, but I did have to figure this stuff out to make IE work correctly.

And I suppose if we are supposed to do a better job with designing, that means we can never use transparency again?

IE7 renders alpha channels correctly, so there is only a year or so before most users will have gotten past IE6, and we can look back on this and laugh.

Until we get to that point, go ahead and shun clever tricks to design a page the way you want, not the way Microsoft wants.

Thanks i was needing this, very nice work.

At my site, I’ve used the following pngfix.js downloadable from http://alufis35.uv.es/websvn/filedetails.php?repname=spip&path=%2Fmollio%2Fbranches%2F1.9%2Fjs%2Fpngfix.js&rev=0&sc=0

Regards
Pablo

How many people still use IE5? Everyone won’t be using IE7 in year, or in 4 years.

cool hack btw

I’ve seen this hack before on alistapart, and I’d love to use it but the limitations put me off. Mostly the fact that it wont validate. I like to write accessible semantic xhtml and if that means a little less bling then so be it. After all it may look pretty but what does it add to the value of the page? Not enough to justify the hack IMHO.

At least a possibility, if needed, …

the easiest way to do this is to simply load pngfix.js by http://dean.edwards.name
also, do not make it “if gte IE 5″…it is better to make it “if lte IE 6.9″, that way IE 6 and below will use it but now IE7, which does png transparency just fine.

One note though, and something to try with yours, make an image a link; then see what part of the image is left. I made some style image links for menu. Only the actual image was clickable…the part that was transparent got totally ripped out. Food for thought.

While I commend your effort, a simple link/attachment in the head of your html to the pngfix.js file cures all the headaches.

Great effect but if you use multiple pngs, it means multiple divs and lots more css..dang.

Also don’t forget that it looks like a background, but in fact it is an ActiveX object. The problem with this is that you can’t use background positioning. I ran into this trying to use a PNG using this technique and have it align to a DIV’s bottom (for a drop shadow). I could have added an extra DIV, but didn’t since I believe in semantics.

this is awesome…

pretty good method for the stupid IE.

Doesn`t work for me. I get no image. Moreover, I get no more image even in Mozzila and Opera. The code is probably interfering with something… My properties are defined into a separate .css file. How do you integrate that piece of code into the .css file? Bloddy I.E….

perhaps you can send me your codes and I’ll take a look for you

Not sure why folks would criticize something that simply provides an additional possible approach for something that may help even just a couple other folks. If it doesn’t help you, fine… but from what I’ve read, it does help quite a few others.

I probably won’t use it, but I like the thoughts and information provided, the positive follow-ups, and the time you took to share your findings.

Negative comments should never discourage innovation…

A long and interesting read. I have just finished a site for a local rock band and wanted the eye-candy that I think should go with that type of site. Png’s offer the creative flexibility I want. so any help to get around sodding IE is to be applauded. I’m glad that the majority of comments have been positive even if those commenting may not use this particular fix. Respect to anyone who offers solutions to problems. It’s how things move forward. No?. Personally I’m glad I found this site. Cheers.

Thanks for your tips….

is there a way to get this to work from an inported css in a conditional comment? – I can get it to work inline but not via inport

** import that is

thanks for explaining this! good stuff!

At my site, I’ve used the following pngfix.js downloadable from http://alufis35.uv.es/websvn/filedetails.php?repname=spip&path=%2Fmollio%2Fbranches%2F1.9%2Fjs%2Fpngfix.js&rev=0&sc=0

Regards
Pablo
===================================================
Thats really brilliant ;) well done,
now i dont have to put the image in div and add a style.

Regards,
Amr

This works in IE but sadly, nothing shows up in Firefox :(

i use php script. nohack

first of all, thanks a lot for the solution, i’ve been looking for it for some time :)

second, there’s a possibility to implement this without conditional comments, since your method is considered as a “hack” why not make it simplerwith the use of another one using just CSS? :)

The following “hack” works in Firefox, Opera, Konqueror & Safari:

*|html .classname { }

and the best thing about this “hack” is that any version of IE doesn’t “see” it. So you can have:

div.flower {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’flower.png’ ,sizingMethod=’crop’);
}

*|html div.flower {background:url(flower-transparent.png) no-repeat; height:100px; width:100px}

without cluttering up HEAD section :)

oh, and btw wordpress doesn’t play well with apostrophes… you might want to insert code section inside <code> tags, so that when people copy/paste it they won’t have any problems. sorry, if that was mentioned somewhere above in comments, didn’t read ALL of them :)

That’s good, thanks for the tips :-)

hey man thanks so much for the nice tip. i can use it in many places.

This is a fantastic solution, and have been using it for a while now with really good results. The hack is definately well worth it, and I don’t see why people have to post useless negative comments when it’s obviously helping people.

The image appears blank in firefox or safari on windows or a mac. I even tried your example.

Ryan,

that was a great fix. i am using a conditional statement to pull a specific div for IE that will allow for png backgrounds. I then relatively positioned another div inside and the form works.

thanks

Does the PNG repeatable in IE?

another way to do this is to add a background color to the PNG file. IE6 and lower will display the background colors; other browsers will obey your transparency instructions. A utility called “TweakPNG” can do this: http://www.mywebsite.force9.co.uk/png/edit-png.htm

Adding a background color using this utility is NOT the same as adding a layer in Photoshop, matching the colors and flattening layers. You are actually editing the PNG files specifications.

I realize this won’t work where your background isn’t simple but this solution doesn’t require any coding at all.

yea this doesn’t work in IE5 or IE6, just checked it’s not working for me.

The working example doesn’t work because the image is linked as “flower.png” in one place and “flower-transparent.png” in another. With that changed, it works properly in FF and IE6.

yes in sample code, name of the image need to change. But problem is that in IE6 I’m getting a security warning.

. . It’s always good to notice that sometimes this technique won’t work unless you explicit specify width and height for the container element.
. . Altought you did it in the article, you didn’t stressed out this need and most people won’t do that (’cause most of time it’s not a desirable behavior).

. . Amplexos.

Good work,

just one thing to make it perfect – rename flower-transparent.png to flower.png since CSS in transparency.html is written for this image. In article itself there are also mentioned two different filenames, but I suppose that only one image needed.

I don’t get it, why use flower-transparent.png when there’s only one image?

Thanks ! Can any one tell me how to fix background : url(image.png) problem with css. Please email me shahinbdboy@gmail.com. Glad to get email with solution.

Thanks for the tutorial I was looking for this only… btw IE is worst browser i have ever seen

i’d tried but fail in IE

Thanks a lot. It works like a charm!

I´m using another way. I save this pics as 8 bit png with alpha-transparency. 256 colors are almost enough for buttons, badges and so on.

I was facing this problem since a last few months, thanks for your article, it really helped me a lot. I just did some few tweaks in code so that it works well in IE6, IE7, FF and Safari :)

Don’t use external css file, it won’t work.

Cheers for this, ugly as anything hack but at least I can workaround and actually make a decent layout without getting grilled by clients for sites not working correctly in IE6. Soon it will die like IE5… we can only hope ^_^

kam kaj chad ka ghara baijo kanjaro 1 kam ta tuhada kolo hunda nahi hai bada vada vada akhra vich likhya hoya hai ki png transpareny in ie……

Pablo & Amir, I like the pngfix.js implementation. But it doesn’t work for me. Do you know if this supercedes any styling in Joomlaworks’ Frontpage Slideshow? I use this slideshow in a WPRemix theme. The transparency is within the slideshow which is styled by template_css.php located outside the theme. Any hints or specifics? Appreciate any help — from anyone in this list.

Thanks,
Gabe

Hi Ryan, I was hoping you had a working example of your solution to the IE6 png problem that I could look at. If you do please email me a link. Thank you very much.

-Raffi K.
raffik@hotmail.com

Hi Guys

I’ve tried following the methods shown but none of them seem to be working for me, all that happens is the whole image dissappears as appossed to the block dissappearing.

Can any one help?

I have several pages with the same images on them, they are all linked to a stlye sheet

Re: Best Resource for PNG Issues On the Net

Might I add that if anyone is making a website in the Uk, Ireland and im sure most other European countries & possibly USA, Many Public Sector Establishment’s like Social Secvices, Hospital’s, Police, Civil Servent Offices, County Council’s, Public Sector.

Are all using IE6, Its Security Policy.

idiots

Hola..
vi el pequeño tutorial, me baje el codigo , lo ejecuto, sin embargo ami me ocurre todo lo contrario, en IE lo veo perfecto, pero en Firefox no sale la imagen de transparencia, por que sale eso?

espero la respuesta a mi correo, gracias.
Atte: softvel

Lenny –

Firefox is FAR more secure than any version of Internet Explorer.

That it’s a “security” policy to use IE6 for any government agency is…sad. Very sad. Apparently some governments must like to use a browser with poor coding and as many security holes as swiss cheese.

OMG this was as simple as that. And I’d been look all over. thanks hongkiat.

it is not working when you deploy the file in Jboss server