Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

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 ..

share|improve this question
1  
Can you rephrase this in the form of a question? –  e100 Feb 28 '11 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. –  Philip Regan Feb 28 '11 at 20:30
    
@Philip Regan can you check now ? –  Praneel Mar 1 '11 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. –  Philip Regan Mar 1 '11 at 14:27
add comment

5 Answers

up vote 3 down vote accepted

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

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

share|improve this answer
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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