Manipulating Background Images with CSS - Vertically tiling a new background image
(Page 4 of 4 )
As I expressed in the section that you just read, the last practical example that I'm going to show you with reference to using a basic background image to improve the visual presentation of a given web page will be based upon changing the picture that I used previously to a different one, which in this case will be tiled vertically across the entire web document.
As you'll see in the next few lines, this technique is also very simple to implement, as demonstrated by the signature of the sample (X)HTML file below.
<!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(bgpage2.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>
For this specific case, the above (X)HTML file uses a new background image to display a gray-colored web page, also delimited by an elegant white border: Besides, it's valid to clarify that the size of the image in question has been reduced for editing purposes, but you shouldn't worry about this, since at the end of this tutorial you will be able to download the corresponding supporting files, so you can test this example on your own browser.
Having said that, here is the background image:
And finally, please have a look at the following screen shot, which shows the brand new look and feel that I provided to the above sample web page, this time including the previous background picture, of course:
Pretty attractive, right? As you can see, tiling small background images can be a really effective technique for noticeably improving the visual presentation of any web document. In addition, you can download all the supporting material that accompanies this tutorial here or at the beginning of this article.
Final thoughts
In this first installment of the series, I demonstrated how a simple, small background image can turn a boring web page into an eye-catching landscape with the assistance of a few CSS styles. Nevertheless, this educational journey hasn't finished yet, since in the last part I'm going to show you how to polish the look and feel of many other elements of the same web document by using the power of CSS-tiled background images.
Now that you've been warned, you won't want to miss it!
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
/ 3 
