I am going to use an image for my header which should to transparent..i thought of using PNG but a bit worried about its transparency issues .. So is there any solution?

Its a two image header where a transparent image is placed over a normal image ..

We have a site layout used for 4 different clients.. So i use different style sheets ..

So in the style sheet i should add the logo of the client (which should be a transparent image) But right now in my computer i do not have any transparent issues.. but i read this article http://homepage.ntlworld.com/bobosola/pngtest.htm

and a bit worried about it's performance ..

  • 1
    Can you rephrase this in the form of a question?
    – e100
    Commented Feb 28, 2011 at 20:11
  • This question is very broad and lacking enough detail to really answer it. What, exactly, are you concerned with in regards to transparency? Is there a specific problem you are having? If you rephrase the question, I'll be happy to reopen it. Commented Feb 28, 2011 at 20:30
  • @Philip Regan can you check now ? Commented Mar 1, 2011 at 14:14
  • I've reopened since you linked to that article that I think helps to explain what you are concerned about. I think, however, that you ought to summarize your specific concerns so that the question doesn't rely on everyone linking to the article. Doing so will help bring some context to the question and your answers. Commented Mar 1, 2011 at 14:27

5 Answers 5


The page you linked has a solution: to use a PNG with transparency, you need to fake it out for specific browsers ( from that link there is also a MS support page see: http://support.microsoft.com/default.aspx?scid=kb;en-us;294714 )

The advantage the PNG has in this case is that it supports alpha channels which essentially allows 256 levels of transparency (from opaque to clear). GIF only supports a single color for transparency and that is why there is a halo.

The workaround for GIF halos is to use a background color which is compatible with the GIF. The workaround for PNG is to use javascript swap out any PNG images for a div container with special properties.

Neither is a bullet proof method.


PNG is fine for transparency. In my experience it's a question of how many colors your image has, and how big it ends up being. For vector I tend towards GIF and for raster I like PNG, but there's no hard-and-fast rule.

Experiment in the Save For Web dialog in Photoshop and play around with the colors. See how many you can reduce it to without compromising quality.


A quick solution is to use one of the large number of "pngfix" libraries. Depending on your dependancy issues, you could use a jQuery pngFix or a javascript less solution (HTC solution) iepngfix.htc


This question is very old.

With Microsoft dropping support for Internet Explore 6, all modern web browsers now support png transparency. There is no longer any need for the hacks presented in some of the answers here.

Whether or not to use gif or png now simply comes down to file size and color support. Gif is still better for large areas of flat color or animation. But PNG is a viable solution in many instances.


PNG with transparency works fine without any hacks for over 99% of users (with exception of China where IE6 isn't quite dead yet).

If you use PNG8+alpha format then it will work great in all modern and not-so-modern browsers, degrade gracefully in the very old ones, and you'll get small file size too.

You'll need a converter, because Photoshop can't create those files.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.