I've been complaining about using transparent PNGs over the use of transparent GIFs for a while now... and this argument really comes down to those who care about IE6 and those who don't.

And while there are fixes to support transparent PNGs as images, those fixes don't work when the images are CSS backgrounds. Using <img> as backgrounds is kind of messy with z-indexing but can be done, I just wouldn't want to try to run any sort of flash or forms on the same page otherwise you might run into some horrible bugs between browsers.

The simple solution would seem to be to just not care about how things appear in ie6, but that can't always be the case :( For as long as people are still using ie6, there will be products or services whose target markets will be those people who are running ie6. (Yes, they exist)

Searching for a Solution

There's a fond place in my heart for transparent .GIFs, and when used correctly, they can do a pretty great job. While 256 colours isn't enough for a photograph, it's great for logos, or simple backgrounds with very few colours. It's even fine for gradients so long as the colour changes don't exceed the colour limit.

How to export a GIF

There are a few simple things to remember, Matte being most important. This is what gives your background it's ability to blend with wherever it's being placed, just make the matte the main colour of the background and you're set! A downside of GIFs is that if you put a white matte on it and then place it in another location that it wasn't intended for, like for example a black background, it will look jagged, and unhappy :( A PNG on the other hand has the ability to look great regardless with alpha transparency.

If you are placing a GIF on a gradient or multicolour background, I've also used a tricky method of exporting the image twice, and then combining, using two mattes so it blends between gradient tones.

If you want, you could set a png for every browser except for ie6 with an if statement in your css or html. You could include a separate stylesheet for just ie6 as well as a lot of people do.

Another Option

Another option I wanted to explore was more for transparent colours rather than images, though you could use images as well, they would just turn out watermarked or faded.

In my theme's navigation I've used a semi-transparent grey that overlaps the background and 'g' of Xalking. I liked the effect and decided to achieve this with just CSS, and guess what? It totally plays happy with ie6,7,Firefox,safari etc.

.transparent-menu{
	background: #525252;
	opacity: 0.70;
	filter: alpha(opacity=70); 
	-moz-opacity: 0.70;
}

Basically what this does is set the opacity of the set background colour (or image). The downside of this is that all contents will be effected, like links or text. The way I got around this was by absolutely positioning two divs within another relatively positioned div, the one with the links and text having a higher z-index than the other.

The result? A nice semi-transparent image with little fuss and no images that is cross browser and ie6 happy!

(oh and btw. this method of transparency is great for image rollovers and fading out inactive links or tabs!)