IE PNG Transparency Part I
I have wanted to work with PNG-24 images on the web for a long time now, but have stayed away due to the fact that Internet Explorer does not recognize the transparency natively. Thanks to Erik Arvidsson’s fix, I no longer have to worry. I was a little bit confused by Erik’s write up, and I am pretty Otaku (Japanese for Geek), so this is a quick and dirty tutorial on getting it running on your website. The only thing you need to do is include this small bit of text in your CSS file:
img{
behavior: url(”pngbehavior.htc”);
}
The pngbehavior.htc file does all the work. The only other thing you need is a blank image file. You can create a 1 pixel by 1 pixel transparent GIF image for this. Make sure the pngbehavior.htc file has the correct location of the blank.gif image in case you placed it in a different directory. That is all there is to it! One thing you must do is specify the width and height of the image, though I am sure you are doing that for accessibility sake already:P Take a look at my PNG Transparency Demo.
Download the Demo:
Update: Check out IE PNG Transparency Part II to use transparent PNGs inside you CSS. This is the technique I used when creating the Beer WordPress Theme.
If you liked what you read you may be interested in subscribing to our RSS feed or email alerts. You may also want to read up about what RSS feeds are all about.
39 Comments
Leave a Comment
Trackbacks
- Hawaii Website Design » IE PNG Transparency Part II
- Daily Links | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster?
thats actually really interesting. I dont personally use png-24 files all that often, but I might now. I’ve seen some sites that use them very creatively but wondered how they got around the IE frustrations….I suppose this is how, thanks for the tip!
I’m glad that this helped you Ryan. Please come back and post a link if you end up using this in a project, I would be interested to see how you used it.
I’ve been using a javascript fix which does a similar thing but the script increases the page load time quite significantly – this looks much quicker! great!
That’s nice! What if you want to use PNG-24 as background image? Will be nice if there is a similar workaround also for that!
I use png all the time, all other browsers (inc. IE for Mac, from ‘94 on) understand png transparency. I hate IE anyway, so I don’t give a flying f*ck if that piece of broken code doesn’t display something right, it doesn’t even understand css right. But this is just so simple a fix I might even incorporate this as I don’t have to work my ass of to make some stupid excuse of a browser understand standards. Sorry for the ramble
@vasilis
I recently discovered that too. I can’t figure out repeating tile patterned PNGs, but got the background images working as well as a repeating solid color background. Take a look at PartII of this article. I added a link at the end of the post.
@simonjs and Nite
I’m glad it helped you out.
Fine guide – I’d like to not just care about IE and once for a period of time I had forgotten to even think about it (I use linux). Later I managed to install IE under linux+wine to test the sites that I have made and make because while they worked perfectly on other browsers I noticed that many of them looked more or less (many times more) flawed (were not, looked – IE is what is flawed) and almost everytime I design a website a big part of the time goes to after-editing the page to work under IE correctly! That’s why I often make my webpages and even CSS-files with PHP so that I can check if the browser requesting the page is IE and offer ie-specific version of them – Before this I used to disable some images and replace some with .gif or .jpg version’s of the image on IE-version. At least now I don’t need to worry about that anymore (and as for versions older than 5.5 – hardly nobody uses them – though my friend has 5.0x (uses it only for windows update though) – so I don’t care about them showing wrong on that old versions – they mess the pages often in many other ways too, so that making specific versions for them would be way too much work for way too few users…
Anyway, I already thanked you about this guide on email, but decided to write here too for others to see how I appreciate your work
Btw, on my css-php scripts I send the “img { behavior: …” thing only to IE, because I like to have my CSS (and HTML) w3c compliant and behavior: is not valid css property, so I only send non-valid css-code to IE…
You can see the source of my latest one here:
http://millajaakkola.kapsi.fi/?osa=source&filu=css
It’s a finnish site, but it’s the source-code section and the miffy.css.php loads with that link… you can check the other .php files on that page too, it shows the source code neatly – index.php has some checks too for IE (and links, which does not support css).
This fix looks just fantastic! But I’ve been trying to use it for the last week and just can’t work it out. I wonder if anyone would be so kind to zip up the demo page with all the files and folders needed to do the fix? Basically a working downloadable example. The closest I got this to working was when all my PNGs just disappeared! Sorry for being a nong but I am really struggling on this one. Cheers, Atters.
Wassup Atters,
Please make sure that you specified the width and height of your image otherwise it will not work. If it doesn’t work let me know and I will package a zip file for you with an example.
Jeremy
Yeah I thought of that but still no luck. I feel like an idiot because I’m usually all over this sort of thing. I really appreciate your help Jeremy.
Cheers mate,
Atters.
Hey Atters,
The only other thing that I can think of is that in your pngbehavior.htc file you are not specifying the correct location of the blank.gif file. Anyways, I have created a zip file of the demo you can get it here: http://designoahu.com/iepng/iepng.zip
Good luck, and please post a link to the site you end up using it on if you get it working. Also, let me know if you still have troubles.
Jeremy
Your a legend Jeremy, good onya. Will do.
Atters.
I havent tested on real windows (my downgraded computer has too little memory to run windows at any kind of usable speed), but with IE’s (5.5 & 6) I get the problem that the image does not show correctly, it just dissapears after showing for a part of second on the screen (without transparency) – Is this problem with wine or is there something missing from my IE installations under Linux+Wine? It seems, judging from the comments (and I think I checked the site at school with IE too and it worked) it does work at least for most people…
Any idea?
thanks
Thanks.
Hi there…
I kept almost the whole day trying to find a solution for the png transparency thing around the web. Most of them didn’t work at all.
But yours is pretty close to work well. But I’m still having one problem:
- the png transparency is working, but the links and form entries are not.
I will try to find a sollution around the web, because I’m pretty sure I’ve readen something about this today. But if you could send me an e-mail or reply here giving the instructions for fixing this, it would be nice… 8^)
Anyway, I’m already happy to see the transparency… hehe…
I’ll bookmark this page, so I can remember your site to come back.
See you! 8^)
@Roger
So is your transparent images the background for the form and links? Can you post the URL, and I will take a look.
Thanks a LOT!!! I needed this right now:)
@Jani Saksa: I am having the same issue, however I am using a program called IETester. It has the engine from 5.5, 6 and 7. 5.5 and 6 both show it for a second then it completely dissapears.
thank you
thanks
thank you so macht
Your a legend Jeremy, good onya
thank you
thanks
thank you
thank you for article
thanks
Thanks a LOT
thank you
thank you very much
thanks
thank you for article
thank you
thank you very much
thanks
nice article.thanks
thankyou
istanbul çiçekçi
thanks you