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.
- Two Layered Layout Using CSS.
- CSS for that Layout
This is a sample of what you could do using the style sheet and template.
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.
Free Layered Background Templates
Planning a Genealogy Website 2nd Edition is available as a 42 page EBook in pdf format for you to download. It has been totally revised and updated with new content. The EBook is zipped for faster download. Save it to your desktop, extract the file and it is ready to use.
April 2007 - April 2013
Disclosure: This is an affiliate link, which means that if you visit Bluehost.com through this link and purchase this product, I’ll get a commission.