STYLE SHEETS

Styling Headers, Navigation Bars and More with Image Backgrounds and CSS

Tiling background images with CSS is a simple technique that can make your web pages look much more attractive to your web site's visitors. If you're interested in learning how to put this popular approach of modern web design to work for you in no time, then you should start reading this article now!

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 8

June 13, 2007

TABLE OF CONTENTS:

Before I begin explaining how to use a few basic background images to give an attractive style to the different elements of a given web page, I'd like to refresh your memory of the CSS-based technique that I used in the previous tutorial. It was useful for styling the <body> section of the page in question.

As you'll probably recall from that tutorial, the sample web document that I coded previously had a classic three-column layout and presented the following structure:

<!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: #666 url(bgpage.gif) center top repeat-y;
}

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 - Background image
with (repeat-y) 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>

As illustrated above, the previous sample (X)HTML file used a small, horizontally-tiled background image, which was tied to the respective <body> selector, in this way achieving the visual appearance demonstrated by the screen shot below:

As you can see, the look and feel provided to the prior web document is acceptable, particularly taking into account that it's been generated by a small background image, like the one shown below:

All right, after studying the previous example, surely you'll have to agree with me that improving the visual presentation of any web document using basic background images is indeed a process that can be performed with minor hassles. As you saw, this procedure is reduced to creating the image in question and tiling it vertically or horizontally, in accordance with the structure of the element to be styled.

Having explained how to modify the overall appearance of a specific web document via a few simple CSS-tiled images, it's time to leap forward and see how this same technique can be used for improving the look and feel of the respective header and navigation bar included in the sample (X)HTML that you learned before.

Do you want to see how this interesting task will be performed? Okay, click on the link that appears below and keep reading.

Next: Styling a basic header and a navigation bar >>