Creating Gradients for Individual Containers with PNG Images
Welcome to the final part of the series called “Using PNG images to build background effects.” This series teaches you how to combine the power of CSS with Microsoft’s proprietary graphic filter to build professional-looking gradients that can be applied to any element of a web page. These gradients will also be rendered correctly by most modern browsers.
Creating Gradients for Individual Containers with PNG Images - Creating gradients for several web page headers (Page 2 of 4 )
A good way to start demonstrating how to construct fancy gradients that can be applied to individual containers in a given web document is by listing the complete source code of the hands-on example that I built in the previous article of the series. The same concept was used, in that particular case, to decorate several headers of a determined web page.
This example also implemented a simple CSS hack that made it possible to display the gradients in question in a true cross-browser fashion. Now let me show you how the example looked originally. Here it is:
<!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 section headers (cross-browser version)</title>
<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 class="sectionheader">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 class="sectionheader">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 class="sectionheader">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 class="sectionheader">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 class="sectionheader">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, aside from building a basic three-column web document, the previous (X)HTML file is tasked with decorating all of the <h2> headers with a transparent “bg.png” image, which is then tiled horizontally across these elements to achieve the proper visual effect. This task is performed via the definition of a basic “headersection” CSS class, which will be either applied directly to the mentioned headers, or done using the “AlphaImageLoader,” Internet Explorer’s proprietary filter. This depends on which browser is being utilized.
Well, provided that at this point you recall the details of how to apply cross-browser gradients to all of the <h2> elements of the prior sample web page, I think that this is definitely a good moment to jump forward and see how this same approach can be used to style the individual containers of the web page in question.
This process will be very similar to the one discussed above, but in order to learn how it will be performed, please go ahead and read the following section. Don’t worry, since I’ll be there waiting for you.
Style Sheets 
Building Cross-Browser Background Effects with PNG Images
