PNG Background-Image Transparency and links, Internet Explorer, and Nested DIVs
It’s simple enough to create a site that has a repeating background image with a content area layered on top that features a drop shadow/outer glow around it. But what if you want the drop shadow graphics to be called via the CSS file as background images like they should be? That makes some of the quick and dirty PNG Transparency hacks for Internet Explorer useless, and brings up the need for another solution. And that leads to another layer of complexity if you’ve got floated/nested divs within the content area the features the transparent background image.
To summarize, we want:
1. A patterned background.
2. A content area that appears to be layered on top of the background area, with some kind of drop shadow effect to give it a feeling of depth.
3. The images that create our depth effect to be called from the css file as background images instead of the html.
Basically, it can be worked out in a series of pretty simple steps.
First, your HTML:
Basically, the wrapper div, called content, has a repeating background image that features a drop shadow and repeat-y. In order for this effect to jive in IE, we need to use some old Microsoft-specific fun. First, here’s how our browser output should appear:
Of course, by default, IE 6 displays some horrid gray solids instead of our lovely drop shadow effect. So, some simple css trickery will fix the issue:
There’s a few things going on here. First, the content div’s background details are outlined for good browsers (background-image and background-repeat) and then were done, really, for Firefox/Safari etc.
On to the Internet-explorer fixes…
First, we use the star hack to tell IE that there is no background image. Then, we use the AlphaImageLoader filter to turn around and tell IE that, actualy there is a background image, and that despite how desperately it wants to destroy our pretty dropshadows, it musn’t.
Finally, we set the z-index of the content div to 1 and the z-index of any nested divs to more-than-one and the position to relative. This is so the content will be properly layered on top of the new fancy transparent PNG background. You may be able to get away with not using z-index at all. Give it a try!
This works in IE 6 and 7 as well as Firefox for PC, and Firefox and Safari for Mac.