How to Use PNGs to Make Awesome Backgrounds
Now for IE 6, take a look at the source of the page. You’ll see this code in the head:
<!--[if lte IE 6]>
<style type="text/css" >
* html #inner {
background:none;
padding:50px;
height:350px;
width:350px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src=’../../images/png-tutorial/bg-page1.png’, sizingMethod=scale);
}
* html #fade {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src=’../../images/png-tutorial/bg-fade.png’, sizingMethod=scale);
}
#page {
background:none;
padding:0;
}
a {
position:relative;
z-index:1;
}
</style>
<![endif]–>
Let me explain what is going on here. We are using IE conditional comments to only use this css if the browser is IE 6 or less. If we are using IE then we set the background of the #inner div and #fade div to none, and use the AlphaImageLoader filterto display a PNG. Some tricks to using the AlphaImageLoader are to use the ‘* html #div’ syntax and place the code on the page and not in a css file. I don’t know if these are required to make it work (in fact I’ve see other people do exactly the opposite), but this is the only way I’ve gotten it to work in every case.
Now if you are paying attention, you might be asking yourself, “Why the inner div?”. Well, not only does IE provide the AlphaImageLoader filter, they also provide a nice bug to go along with it. When you apply the filter to an absolutely positioned element (like if we would have applied it to the #page div) then none of the links in #page div’s children would work. This is because the AlphaImageLoader filter is placed on a layer above the links. I still don’t really get that though, because you can still see the text, but that is how it was explained here. The fix is to apply the filter to a div inside the absolutely positioned element, and then set the links to have position:relative and a z-index of one.
Ok, so maybe that part is a bit confusing, but all in all, if you know these things up front then designing with PNGs is much easier. Here are the links that are mentioned in this post for easy reference:
- The Example - 3 PNG background examples that will make you drool.
- IE Conditional Comments at QuirksMode
- About the AlphaImageLoader filter
- AlphaImageLoader Link Bug fix
Subscribe with RSSCategory: Design | 6,375 views | Posted: November 5th 2007 07:00 am
Comment by Zaigham
on 08 Nov 2007 at 9:00 am #
Its a nice article, however that alphaLoader stuff does not support tiling of the PNG images.
… and I don’t see the examples working right in IE6.
Comment by James Ehly
on 08 Nov 2007 at 9:53 am #
Zaigham - Thanks for the comment. That’s right, AlphaImageLoader doesn’t support tiling. It just doesn’t work that way (it’s lame). Sorry it doesn’t work in your IE6, it works in all the ones I tested. I hate IE 6…
Comment by Greg
on 02 Dec 2007 at 7:57 pm #
Great article. And regarding IE6. Who cares? I stopped debugging for it a while ago
Comment by Indy
on 03 Dec 2007 at 12:58 am #
Now that was cool. Nice job.
Comment by bender
on 03 Dec 2007 at 10:02 pm #
PNG’s are ok for backgrounds, but photos are better.
Comment by rene
on 25 Aug 2008 at 3:14 am #
Check out my photo-backgrounds-CMS: http://mediabeez.ws
And thanks for this article; the clicks-not-working-bug had me worried for about a day until i found this article..