Cascading style sheets are great for building all sorts of eye-catching background effects for web pages. CSS allows the utilization of JPG, PNG and GIF images, which can be easily repeated along the X and Y coordinates. This facilitates the creation of professional-looking web documents by using only a few tiny background graphics that can be downloaded quickly by way of a browser.
Using PNG Images to Build Background Effects - Building background gradients using a simple JPG image (Page 2 of 4 )
The first step that I’ll take concerning the creation of gradients using tiny background images will consist of building a sample web page. In this case, we will utilize a basic JPG-based background that will be repeated along the X coordinate of the web document.
Next, after having analyzed this particular example, I’ll show you how to use a GIF image to construct the gradient. That being said, have a look at the definition of the following (X)HTML file, which constructs a simple web document that includes a fancy JPG-based background. 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 JPG-based background</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>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 depicted above, this sample web page uses a three-column layout to accommodate its contents, while incorporating header and footer sections as well. So far, this is nothing unexpected, right? And this is definitely the nitty-gritty of the example. The web document displays a smooth background gradient via a thin JPG image, as shown by the screen shot below:
Also, if you visualize the previous web page in Mozilla Firefox, it will display the gradient in question correctly, as demonstrated by the following image:
So far, so good. I showed you a traditional approach to building a basic web page that incorporates a JPG-based gradient. Of course, for the moment, I haven’t used a transparent image to decorate the background of the web page in question. But don’t worry, because I’ll come back to this topic later.
Now that you've seen how to build a simple yet elegant web page background using a JPG image, it’s time to learn how the same visual effect can be created with a GIF. As you may have guessed, in order to go into the details of how this will be done, you will need to click on the link below and read the next section of the article.
Style Sheets 
/ 9 
HTML5 Boilerplate Introduction
