Cascading style sheets let you manipulate the images on your web site in such a way that they can dramatically change its whole look. Keep reading to learn how the technique of tiling can help you make your web site look more interesting.
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:
#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.
Style Sheets 
/ 3 
HTML5 Boilerplate Introduction
