Manipulating Background Images with CSS - Creating a basic web page layout
(Page 2 of 4 )
A good place to start demonstrating how some simple background images can improve the look and feel of a concrete web page is with building a classic three-column web page layout from its barebones structure. Then, with the page layout well underway, I'll begin incorporating a few background images progressively into it, so you can see how the page can be improved considerably.
Take a look at the following code sample. It displays a basic web page composed of thee floating columns. Here the example in question:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #fff;
}
h2{
margin: 0;
font: bold 18px 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: #ffc;
}
#navbar{
width: 780px;
padding: 10px;
margin-left: auto;
margin-right: auto;
background: #fc0;
}
#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{
width: 800px;
margin-left: auto;
margin-right: auto;
}
#col1{
float: left;
width: 180px;
padding: 10px;
background: #eee;
}
#col2{
float: left;
width: 375px;
padding: 10px;
}
#col3{
float: right;
width: 180px;
padding: 10px;
background: #eee;
}
#footer{
clear: both;
width: 780px;
padding: 10px;
margin-left: auto;
margin-right: auto;
background: #ffc;
}
</style>
<title>Example of table-less web page layout - No background
images</title>
</head>
<body>
<div id="header">
<h2>This is the header section of the web page</h2>
<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">
<h2>This is the navigation bar of the web page</h2>
<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="col1">
<h2>This is the left column of the web page</h2>
<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 id="col2">
<h2>This is the center column of the web page</h2>
<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 id="col3">
<h2>This is the right column of the web page</h2>
<p>Contents for right column go here. Contents for right
column go here. Contents for right column go here. Contents for
right column go here. Contents for right column go here.</p>
</div>
</div>
<div id="footer">
<h2>This is the footer section of the web page</h2>
<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 previous example is indeed very easy to follow, since it shows in a simple fashion how to create a typical three-column web page layout, which has been created following a "fixed" model. Also, you may want to look at the screen shot below, which consists of a visual representation for the above sample web page:
In this case, the above image demonstrates the look and feel that I provided for the sample web page coded previously. As you can see, some elements of the web page have been styled basically, including its header and footer sections, its floating columns, and finally, its <h2> headers and paragraphs as well.
All right, at this point I have built a primitive web page comprised of thee floated columns. So what's next? Well, since my purpose here is to illustrate how a simple background image can be used to improve the overall appearance of the aforementioned web page, in the next section I'll create a tiny picture to be used as the background for the complete web document, in this case utilizing the useful "repeat-x" CSS property.
Want to see how this will be carried out? Click on the link below and keep reading, please.
Next: Adding a small background image >>
More Style Sheets Articles
More By Alejandro Gervasio
/ 3 
