I put together a site that has quite a bit of transparency to it. I’ve attached a screenshot of the homepage. The logo is a transparent png with dropshadow, and the menu and content window are made up of slightly transparent png images as well. The background image is in a fixed position so that the content above scrolls over it.
Everything is working great in IE7, FF2, and Safari (WIN), but obviously the entire site looks crappy in IE 6 and others that don’t support the transparency. Here are the questions:
1) I tried adding a simple IF statement (I know, I know) that caught IE6 and below and just changed the background image of the logo div to a gif instead of the png (loses the dropshadow but keeps the transparent background). That’s not working. It may be something easy, but I can’t figure out why… here’s what I’m doing:
… other stuff …
… rest of file…
where the original pci.css file includes this:
background:url(images/logo.png) no-repeat center center;
3) The site works fine in IE6 and I think should in others below it. It just looks crappy. If something didn’t work right, I’d be all about fixing it, but what if it just doesn’t look as good? Obviously it will be the client’s choice, but any opinions?
Since I’m trying to use a fixed background, I’m not able to fake the transpareny with jpgs (as I understand it, the only way to do this is fill the area you want to be "transparent" with the background… but since the background won’t be moving with the rest of the page, this won’t work). Let me know if I’m not understanding this correctly.
Yes, iepngfix.htc is a near-perfect solution. I use it all the time, and it’s so nice being able to actually make use of PNGs without having to worry about IE. The developer’s site is here: http://www.twinhelix.com/css/iepngfix/
It’s quite simple to set up (there’s included instructions). Basically you just have to make one change to the .htc (to point to a blank GIF image, wherever you decide to put it), and then you call it from the CSS every time you need a transparent element. I like to implement it this way:
Then, every time I need to use a PNG, I just add the .pngfix class to the image:
That’s it! I think this would work perfectly for your site.