How to Use PNGs to Make Awesome Backgrounds
Actually, it’s really easy. Simply build your page for FireFox and IE 7, and then retrofit it for IE 6.
There are only 4 styled tags in the examples above: body,div#page,div#inner,div#fade. Here is their css for example 3:
body {
background:#DE0C6D url(../../images/png-tutorial/bg3.gif)
font-family:”Trebuchet MS”,tahoma,arial,sans-serif;
color:#666;
font-size:.8em
}
#page {
background:url(../../images/png-tutorial/bg-page3.png)
padding:50px;
height:350px;
width:350px;
text-align:center;
z-index:20;
position:absolute;
left:50%;
margin-left:-225px;
}
#fade {
position:absolute;
width:100%;
height:200px;
background:url(../../images/png-tutorial/bg-fade.png) repeat-x;
top:0;
left:0;
z-index:10;
}
As you can see the code is really straight forward for our newer browsers. I’m using a div to hold the fade, and div on a layer above that one to hold the page content. If you didn’t want a fade on your background, then you wouldn’t have to do the fancy layering and absolute positioning.
Now see how to make it work in IE 6…
Subscribe with RSSCategory: Design | 6,328 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.