Transparent PNGs.

well. I used Adobe Illustrator CS to save the transparent PNGs... they looked fine on my comp but after u upload them, they lose their transparency. Is there a fool-proof way of saving transparent PNGs?

ok I don't know about illustrator, but photoshop has a save for web option under file, and there is a box that you check for transparency.

One thing also to note, I don't think .png files work for IE

thats what i thought at first, but someone made some PNGs (w/ transparency) that works in my browser.

I know this is a pretty crappy example for a test, but I did it up in about 2 minutes in 3 layers in Illustrator.

No fancy editiing other than adjusting opacity.

Clicked save for web, selected png accepting the default settings (which includes transparency checked). Works in both IE and Firefox exactly the same. (also works on black or white (although white is a little harder to see)

(you should be a graphic designer! )

Yea that IS amazing ATNO/TW

i did that and my images turned out with a blue background V__V don't know why...

an example of one of my images....
http://www.chibicat.com/female.png

and i select PNG-24 when i created this. cus its either PNG-8 or PNG-24

as atno stated, I think you got to adjust the opacaity of that background layer

I set the opacity of the background layer to 0

There's also a bug in IE that prevents transparency in PNGs from being displayed correctly without some messing around...

In firefox, you can just do...


and if there's transparent parts of the image, no problem.

In IE, you have to do something like this..

to get the alpha transparency to display properly, otherwise, they just show up on a solid colour background.

I just setup my script to detect whether the browser was IE or something else. If it's IE, send out the funny DIV code, if it's not, send out the regular img tag.

ya... i looked into that solution from the microsoft support page. but I found a better solution now (to use javascript) ^__^ thanks for your help though.

The reason I didn't suggest JavaScript is that many people simply turn it off.

well ya. but i dont wanna have to do browser checks and stuff (too much work lol)

Nah it's not..



That's all there is to it.

I use the javascript version from time to time cause it catches all the png's in the page, automagically. Generally, I just don't rely on PNG transparency.

As a side note, PNG transparency works VERY well in most MS Office apps. PowerPoint especially will make you appreciate the versatility of PNG transparency. If you have to do that type of thing for work, like me.