A LITTLE BACKGROUND ON BORDERS
(No pun intended!)

"Border Backgrounds" are backgrounds that have either a solid color strip or graphics running down the left side of the browser window. (I should point out that sometimes borders may run down the right side of the browser window or across the top.) Side borders are meant to tile vertically down your screen as opposed to "background tiles" which tile horizontally and vertically to create the background image. Sometimes the strip on the left is narrow and sometimes it is wide. The "trick" is to get your text and other graphics to fit on the right hand side of the screen without running into the border!

There are times when you might want to use a solid color border to hold your navigational menu, graphics or links to other sites. Having the color there can be a nice contrast and set it off from the rest of the text as in this example...

There are a few different ways to set your HTML code for borders. I am going to demonstrate a very simple one.

PICKING YOUR BACKGROUND AND IMAGES

Two things to be aware of when using border backgrounds are:

1. The "width" of the entire background image
2. The "width" of all banners and dividing bars that you use on your page

To explain:
There are many different size computer screens in use and people use different resolutions to view the Internet. If your actual border background size is WIDTH="800", HEIGHT="20" and someone is viewing your page on a large screen with the resolution set at 1024x768 -- they will see your background border displayed twice: first the 800 pixel width of the actual border background size, then it will repeat to fill in the remaining 224 pixels in the width of the screen:

Some graphic artists do not realize that a border background should be a minimum of "1280" pixels wide and will make them smaller. Using these images can destroy the effect you are trying to create -- always check the width of the border background before using it. For a better understanding of how backgrounds and borders create a wallpaper effect on your page, see the Tutorial "HOW BACKGROUND AND BORDER GRAPHICS TILE".

Frequently, border backgrounds will come in "sets" with matching banners, buttons and divider bars. Be careful of the size of the divider bars and banners -- these are often made to stretch the full horizontal width of the browser window.

I can check the width of my text area on this page by using the < HR > tag -- the maximum width I can use for a divider bar would be "415" pixels.

*Remember, if you need to resize an image, do it in a "graphics program", not in your HTML < IMG SRC > tag -- see "MAKING A THUMBNAIL IMAGE" for more information about resizing graphics.

Now let's see how I've kept everything lined up and the text away from the border -- even if you change the size of your browser window!

Copyright is claimed by Otter Sites Web Design to the entire body of this collection, as an entity, and to the HTML code which presents it as a collection. Otter Sites has received expressed permission for use of public domain and other privately owned works on this web site.

The content of this site, in part or in full, may not be reproduced, published, transmitted, uploaded, modified or distributed in any manner without Otter Sites prior written permission. Otter Sites Web Design is not responsible for material presented on third party linked sites.