Phil'sown dot Org

Fun with PNG

1 Comment | Latest by: Nancy | Add Your Comment! »»

I'm trying out something weird with the header. I've styled the two divs as follows:

#header {
	background:url(/img/cam.jpg) no-repeat top right;
	}
#headerimg {
	background:url(/wp-content/themes/cbl/images/personalheader.png) no-repeat top left;
	}

The /wp-content/themes/cbl/images/personalheader.png is a PNG 24 image with transparency, with a hole in it on the right side. The header is using my web cam image as a background. The header gets it's background first (my ugly mug from the cam), then the headerimage, since it's inside of header, displays it's background on top of header's background, creating the nicely wrapped image.

I realize I just lost a ton of browsers with PNG due to the limited support. Someone know the fancy CSS I can use to filter the PNG just to the right browsers? If I can do that I'll serve up personalheader.jpg to everyone else.

Mar 19, 2006 | web site

Trackback: http://philsown.org/2006/03/fun-with-png/trackback

«« Previous Entry  ·  Next Entry »»