Another transparency issue....grey box around image.

[booboo0912]

Hello! I've search through the Archives for related issues, but I haven't found anything related to what I'm experiencing. I have a logo in a <div> tag, placed on top of another image(s). The logo needs to be transparent b/c the image underneath will actually change as the page is refreshed. So I have 10 pictures that will rotate from one to another (only when the page is refreshed or the window is opened, not like an animated gif), with a static logo in the top right corner. I have saved the image as a transparent .gif and .png, using the &quot;Save as web...&quot;. The .png image shows up with the &quot;transparent&quot; grey box around the logo. The .gif works, but the edges are all rough (it doesn't look like this in photoshop). So here is my question:

Why is the grey box showing up in the web page on the .png file? I've used this image format before to create transparent logos, to put on org charts, with various backgrounds and the grey box isn't visible.

I know the .png file is transparent, just not sure why it's not showing up as being transparent with the grey box around it. Any ideas?
Thanks!

 

[Pixelchik]

In Photoshop create your document with a transparent background. Put your graphic or create whatever you want. Then Save For Web> Select PNG 8, make sure the transparency box is checked, then select the Matte box background to match the background colour of your web page as closely as possible. It's better to use the Hex number for this color. This method always works for me.