Top Border Backgrounds
The original part of this tutorial, first written in 1998, will teach you how to use a border across the
top of your page without it repeating at the bottom using traditional HTML. You will
need recent browser versions to view it, Netscape 4 or later
and MSIE 3 or later.
UPDATE: Since it was written, Cascading Style Sheets (CSS) have become the standard. The same result as detailed in the following tutorial can be acheived even more simply by using the following code in your <body> tag:
style="background-image: url(yourdirectory/yourimage.gif); background-repeat: repeat-x;"
To have your background touch the edges of the browser without a gap, you will need to add the following to the code:
In essence your body tag will look like this:
<body style="background-image: url(yourdirectory/yourimage.gif); background-repeat: repeat-x; margin: 0px;">
More comprehensive information on CSS can be found elsewhere on the web.
If you are unfamiliar with CSS, don't want to learn or have no time to learn CSS for whatever reason, then read the following tutorial for information on how to create a top border background.
Top Border Backgrounds: The Beginning
When I was making tiling top border backgrounds,
I made them about 1000 pixels in length. I natually assumed the
user would use them on short or "splash" pages, not
pages that were seven screen lengths long. Using them in the
latter fashion causes the top border to repeat further down the
page, ultimately interfering with the text readability.
This tutorial also assumes you know basic, simple HTML, like
how to create a table and what a BODY tag is.
On to the tutorial, Simple
top border background