Search This Site
 

Layered Backgrounds - Creating Layered Backgrounds

What is a layered background?

A background is an image that is placed on a web page to add color or design to the page. A layered background adds one or more images. The majority of these layouts are created with nested tables. Images add load time to a page so be careful how you use them. Remember text on top of patterned backgrounds is difficult to read. If the graphics you are using require a link back, make sure you include that.

Screenshot of two layered background

Screenshot of three layered background

Creating the layered background look using tables

Basically what you are doing is putting the first background in the style statement. Then you need to create a table for the contents of the page. The second background goes in the table as a background. Change the colors to ones you want to use. Be careful not to delete any of the < > # : or the code will NOT work.

Sample Coding for Two Layered Background

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Page Title That appears 
at top of browser goes here </title>

     
<meta http-equiv="Content-Type" content="text/html; 
charset=iso-8859-1"> 
<meta name="description" content="page description goes here">
<meta name="keywords" content="keywords go here">

<style TYPE="text/css">
        <!--
        body {
        background-image: url('image-at-back');
        background-color: #c1cdc1;
        color: #003300; 
        margin-left: 2em; margin-right: 2em}
        a:link { color: #006400;}
        a:visited { color: #2F4F4F; }
        a:active { color: #556B2F;}
-->
</style>
</head>
<body>

<table border="1" cellpadding="15" cellspacing="0" 

style="border-collapse: collapse" width="100%" 
background="2nd-background-image">
  <tr> 
<td>Content goes here

</td>

  </tr>
</table>
</body>
</html>

View screenshot of page design by Rhio's Sampler

This two layered look can be created using a css based layout.

If you would like to use a table-based triple layered background with a cascading style sheet, Tina Clark, Microsoft MVP has provided the template and CSS FREE.

You can also create the triple nested effect using a straight CSS based layout.

When you are inserting graphics OTHER THAN THE BACKGROUND IMAGES, be sure and give the image height and width.

Example: 

<img src="cemetery015.jpg" height="205" width="362">
Why should you specify the width and height of your image?  WIDTH and HEIGHT tell the browser the dimensions of the image. The browser can use this information to reserve space for the image as it constructs the page, even though the image has not downloaded yet. Use the actual dimensions of your image. If you need to resize the image, use an image editor.

NOTE: If you are not familiar enough with html coding to find your mistakes, the more complicated you make your pages, the more opportunity there is for you to "mess up" your code. You might want to check your pages at 800 x 600 resolution as well as 1024 x 768  to see how far "above the fold" your information appears.

Above The Fold refers to the part of the screen where a user does not have to scroll to see content. It is a reference to newspapers where the top part of the page is above the fold.

Reference Links: