You are currently viewing the old version of this site. To see to the new version go here


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:

margin: 0px;

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


NEW! Review of Various Astral Plugins

SSI Image Secrets

Review of AutoFX Mystical Series

Review of AutoFX DreamSuite

Ghost Gif

Top-Bordered Background

Full-Bordered Background

Paisley-patterned Background


Tiling Fonts at The Dingbatcave

previous page

dingbatcave.gif gemstonejewelry.gif artobjects.gif wc.gif