I came up with this nice little trick while creating a site we just released (www.paradisetablets.com). I wanted to make a transparent shadow around the page so that it looked like it was floating in water. I’ve read that you can’t tile a transparent png in the background with CSS that’s viewable in IE. Since I rarely take no for an answer, I set out on proving this theory wrong, well – half wrong. I managed to get all my shadows to show up, but only the horizontal ones tile and show up in IE. Either way, I know this will be a welcome addition to any CSS programmers toolbox. On to the code:
In my example, I will make a shadow that goes around the left and top of the screen and it will go over a background image.
Step 1
The XHTML is simple. Just add two divs under the body tag:
<body>
<div class="left_shadow"></div>
<div class="top_shadow"></div>
Step 2
The next step is to create both your shadows and background. Create your shadows with transparent backgrounds and then save as a PNG32 (I made mine at 50√ó50). Now, pick the graphic that will tile in the background (I saved mine as water.jpg).
Step 3
Next, Visit the site http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html and download pngbehavior.htc. Drop this into your root directory of your static site or in your template directory if you’re using a CMS.
Insert this code into the head of your page:
<!--[if IE]>
<style type="text/css" media="screen,projection">
img {behavior: url("http://fullpath/pngbehavior.htc");}
</style>
< ![endif]-->
I highly recommend putting this into an external CSS sheet that only IE can see to keep the code cleaner and reduce the chance of validation errors.
This behavior allows IE to view PNG files correctly (most of the time).
Step 4
The last step is to put in your CSS.
body {
padding:0px;
margin: 0px;
background-image: url(images/water.jpg);
background-repeat: repeat;
}
.left_shadow {
background: url(images/shadow_left.png) repeat-y fixed;
position: fixed;
width:50px;
height:100%;
top:0px;
left:0px;
}
.top_shadow {
background: url(images/shadow_top.png) repeat-x;
position: absolute;
width:100%;
height:50px;
top:0px;
left:0px;
}
Then you have to fix CSS so that the shadows will be transparent in IE. With this example we’ll keep it in the head area, but I always move it into an external screen_ie.css file.
<!--[if IE]>
<style type="text/css" media="screen,projection">
img {behavior: url("http://fullpath/pngbehavior.htc");}
.top_shadow {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://fullpath/images/shadow_top.png', sizingMethod='scale');
background: repeat-x;
position: absolute;
width:100%;
height:50px;
top:0px;
left:0px;
}
</style>
< ![endif]-->
In all modern browsers this will show a nice shadow on the left and top. On IE it will show the top shadow across the top, but not the vertical shadow. If anyone figures out how to make the vertical shadow show up, please let us know!
UPDATE: If you are using Joomla! for your site, you can download the new Ultimate PNG Fix which works with inline AND background images which will make life a lot easier for those who use PNG files. Download it at
http://www.webpr.gr/joomla/2006/06/ultimate-png-fix-plugin-for-joomla-10x.html