Photoshop CS5, Transparent .PNG's

I am using a dropshadow background image for my website and I need to make it taller.
I saved the background image in Firefox onto my desktop and here is what it looks like in Firefox (the .PNG is transparent even though the background in Firefox is white by default):

But when I open it in Photoshop CS5 I get this (the transparent dropshadow effect is completely filled in with black)

Any idea how to fix this?

How did you save it? I sometimes find similar differences in the final image if I use “copy image” rather than “save image as.”

“Save Image As…” in Firefox. It opens up fine in Preview for Lion and it’s just Photoshop CS5 that converts the transparency to a solid black. Is this a glitch with Photoshop or is it due to a color setting somewhere?

Hm, I think I’ve seen that happen in Ps before, but it was something simple. All the same, as you say you want to edit this anyway, why not just create a new one, which is probably a lot easier anyhow? Just draw your white box and slap a drop shadow on it—done.

Another thing I wonder though is if you should be using an image like this anyway. If you have a fixed-height image like that it won’t work well on the web. It’s best to avoid anything with a fixed height on the web—especially a background image that will have text above it, as text can grow in size under many conditions, meaning that it will spill out beyond the background image. A better approach, then, is to slice the image up and have a repeating section in the middle that can expand if the text does.

Or, these days most browsers support CSS3 box-shadow anyhow (with JS fallbacks for non-supporting browsers) so it might be worth considering that instead, as it’s easier still.

Just a bit of grist for your mill. :slight_smile:

what color mode your working in rgb or ycmb? and check the 8 or 16 bit in the setting. I have had this problem once to, think that was the solution then

It’s a dynamic dropshadow and it works pretty well, except for in IE6, IE7 plus it looks better then box-shadow ;D

I’ll take a look at the color mode and settings.

Not sure what you mean by a dynamic drop shadow (unless you have it set as multiple backgrounds?). I still would just redo it, though. Should be very quick.