Transparent images...

JarredLv

Rape and Pillage Canada!
Dec 24, 2008
2,185
65
0
Las Vegas
Need a little advice here. I'm modifyings a WP template, primarily the header banner. The background of header is a simple gradient. When I want to do is make a simple text header with my site name, but obviously I need the background of my banner logo to match the gradient of the background. Well I don't know how to get them to match perfectly so I was just going to create a image with a transparent background. Well, whenever I upload that to my server it shows my logo, but the background that is supposed to be transparent shows as solid white.

I'm sure this is an easy fix but I've searched for a few hours now and can't find a solution to my problem. Hopefully I got my point across describing what I'm trying to do. Any advice? Thanks guys.

Edit: So I saved my logo file with the transparent background as a .png file and it worked fine. The logo shows and the background is transparent. Is this how it's done? Am I going to have any browser compatibility issues?
 


.png is what to use for transparent backgrounds on logos and such. The only compatibility issues you will have will be with early versions of ie6 and older browsers. I've stopped worrying about ie6 along time ago. If you can't update your browser then you deserve a whacked internet.
 
Yeah compatibility issues with .png are more or less a thing of the past. Alternatively, you could create transparent images in .gif format, but they'll probably look like poo.
 
For anyone who needs to develop in environments where a large number of users can't or won't change from IE6, the fix for IE6 .png is done with a fairly simple JS script. A quick Google search will reveal all.
 
If you find yourself using tons of .png's you will also want to use something like this PNGCRUSH .png's are not perfectly optimized still and the file sizes can start adding up.