Manipulating Background Images with CSS - Adding a small background image
(Page 3 of 4 )
As you recall from the previous section, after building the sample web page, my plan consists of adding some basic styles to it by using a small background image, which will be tiled horizontally across the web document in question.
This idea is simple, but first, let me show you the picture that I'm going to include into the web page, which is shown below:
As you can see, I created the above small background image, whose dimensions are 1px of width X 1000px of height respectively (Image resized for viewability). Quite simple, right?
Now that you know what the previous picture looks like, please pay attention to the signature of the following sample (X)HTML file. It is nearly identical to the example that you saw in the previous section, except that it incorporates the referenced background picture shown a few lines above:
<!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 url(bgpage1.jpg) left top repeat-x;
}
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;
background: #fff;
}
#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 using background
image with (repeat-x) CSS property</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>
While undoubtedly the previous sample (X)HTML file looks very similar to the one coded in the prior section, probably you've noticed that it uses the background image built previously, which is tiled horizontally across the whole web page. Logically, this condition is clearly reflected by the following CSS declaration:
body{
padding: 0;
margin: 0;
background: #fff url(bgpage1.jpg) left top repeat-x;
}
As you can see, the above CSS rule tells the browser to tile horizontally the corresponding background image across the entire web document. However, despite the simplicity exposed by this CSS style, it can truly change the look and feel of a document dramatically, as demonstrated by the screen shot below:
Now, do you see what I mean when I say that the visual appearance of the sample web page can be greatly changed by using only a simple background image? In this case particularly, the above screen shot speaks for itself, since now the web document looks much more attractive than its original incarnation.
So far, so good, right? At this stage you hopefully learned how to improve noticeably the look and feel of a specific web page by adding to it a basic background image. Therefore, it's time to move forward and see the last example of this tutorial. It will show how the previous sample web page can be polished even more by changing the existing background picture, which will be in this case, tiled vertically.
As I said before, this brand new hands-on example will be developed in the following section, so jump ahead and read the few next lines.
Next: Vertically tiling a new background image >>
More Style Sheets Articles
More By Alejandro Gervasio
/ 3 
