Building Cross-Browser Background Effects with PNG Images - Review: Working with alpha-transparent PNG graphics
(Page 2 of 4 )
As is usual with many of my articles on web development (and this one is no exception), I’d like to reintroduce one concrete hands-on example that I built in the last article, so you can recall the approach that I followed to build a simple -- yet elegant -- web page gradient using a partially-transparent PNG image.
As you’ll surely recall, the example in question first constructed a three-column web page, and then decorated it with a tiny PNG background image, which was tiled horizontally across the document. This produced a fading, gray-colored gradient.
Having reintroduced how this practical example functioned originally, pay attention to the signature of the following (X)HTML file, which was tasked with displaying the gradient in question. Here is its corresponding definition:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample web page with PNG-based background (Does not work in IE)</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #fff url(bg.png) left top repeat-x;
}
h1{
padding: 5px;
margin: 0;
font: bold 12px Arial, Helvetica, sans-serif;
color: #000;
}
h2{
padding: 7px 5px 8px 5px;
margin: 0;
background: #fc0;
font: bold 12px Arial, Helvetica, sans-serif;
color: #000;
}
p{
font: normal 12px Arial, Helvetica, sans-serif;
color: #000;
}
#header{
width: 780px;
padding: 10px;
margin-left: auto;
margin-right: auto;
background: #fc0;
}
#navbar{
width: 780px;
padding: 10px;
margin-left: auto;
margin-right: auto;
background: #ffc;
}
#navbar ul{
list-style: none;
}
#navbar li{
display: inline;
padding-right: 4%;
}
#navbar a:link,#navbar a:visited{
font: normal 12px Arial, Helvetica, sans-serif;
color: #039;
text-decoration: none;
}
#navbar a:hover{
text-decoration: underline;
}
#mainwrapper{
clear: both;
width: 800px;
height: 100%;
margin-left: auto;
margin-right: auto;
overflow: hidden;
background: #fff;
}
#mainwrapper .leftcol{
position: relative;
float: left;
}
#mainwrapper .rightcol{
position: relative;
float: right;
}
#leftbar{
width: 180px;
padding: 10px;
}
#centerbar{
float: left;
width: 380px;
padding: 10px;
background: #fff;
}
#rightbar{
width: 180px;
padding: 10px;
}
#footer{
clear: both;
width: 780px;
padding: 10px;
margin-left: auto;
margin-right: auto;
background: #fc0;
}
.contbox{
padding: 10px;
margin-bottom: 10px;
background: #eee;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="header">
<h1>This is the header section of the web page</h1>
<p>Contents for header section go here. Contents for header section go here. Contents for header section go here. Contents for header section go here.</p>
</div>
<div id="navbar">
<h1>This is the navigation bar of the web page</h1>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</ul>
</div>
<div id="mainwrapper">
<div id="leftbar" class="leftcol">
<h2>Section title</h2>
<div class="contbox">
<p>Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here.</p>
</div>
<h2>Section title</h2>
<div class="contbox">
<p>Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here.</p>
</div>
</div>
<div id="centerbar" class="leftcol">
<h2>Section title</h2>
<div class="contbox">
<p>Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here.</p>
<p>Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here.</p>
<p>Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here.</p>
</div>
</div>
<div id="rightbar" class="rightcol">
<h2>Section title</h2>
<div class="contbox">
<p>Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here.</p>
</div>
<h2>Section title</h2>
<div class="contbox">
<p>Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here.</p>
</div>
</div>
</div>
<div id="footer">
<h1>This is the footer section of the web page</h1>
<p>Contents for footer section go here. Contents for footer section go here. Contents for footer section go here. Contents for footer section go here. Contents for footer section go here.</p>
</div>
</body>
</html>
As you can see, the above (X)HTML file performs a few simple tasks, such as building a rudimentary three-column web page, and using a small PNG image to build the pertinent background. Undoubtedly, the most important detail to highlight here is that this background is created using the combination of a tiled PNG graphic that fades progressively to transparent with the utilization of a solid color.
The result achieved by the previous approach can be seen in the following screen shot. This is when tested with Mozilla Firefox:
There you have it. At this point, you have at your disposal an easy-to-learn CSS technique that allows you to build fancy web page gradients that require the utilization of a unique PNG image! Well, admittedly I got caught in the moment, since I forgot that this approach doesn’t work in IE 6 and below. And in order to confirm this fact, below I included yet another image that shows how the pertinent gradient is displayed by Internet Explorer 6:
Pretty ugly, right? As you can see, the web page gradient isn’t rendered correctly by IE 6, since it doesn’t support directly working with alpha-based transparency. However, there’s a simple solution for this issue, and in the next section, I’m going to teach you how to use CSS to build the previous web page gradient, but this time, the good news is that it will be displayed as expected in IE 6.
To see how this cross-browser approach will be properly developed, please click on the link below and keep reading.
Next: Building cross-browser web page gradients with Microsoft’s proprietary AlphaImageLoader method >>
More Style Sheets Articles
More By Alejandro Gervasio
