Simple Top Border Background

The goal is to create a page with a tiling top border that doesn't repeat itself further down the page. The key to doing this is to set up your page in tables and to apply a repeating pattern as a background in the top row of the main table. Ultimately, your page should look something like this.

Decide on a pattern (image) to use as your top background. This can be any pattern that repeats itself from left to right. It does not matter if it repeats itself from top to bottom. For this tutorial, I've created this image.

Make note of the pattern's height. This image is 50 pixels high. Width doesn't matter.

Create your HTML page. You will need to add the following in your body tag:

marginwidth="0" marginheight="0" topmargin="0" leftmargin="0"

What this does is get rid of all the margins so that the border will fit snugly against the top and sides of your browser.

Now you will need to create a table with two rows. The top row will contain the tiling pattern as the background image. (background="top_border.jpg"). Set the height of that row to "50," as the image is 50 pixels tall. Keep a non-breaking space ( ) in the top row with the background pattern. If you delete it, the background tile will seem to disappear in your browser.

The HTML for the two-rowed table should look like this, no borders, no cellspacing or cellpadding:

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100%" height="50" background="top_border.jpg">&nbsp;</td>
  </tr>
  <tr>
    <td>
    </td>
  </tr>
</table>

You have just set up your template for use with your top border. Now you will need to insert your page content. Because you adjusted the margins so that the border will fit snug against the browser, if you insert your text in the second row as is, it will also fit snug against the browser, like this example. Ewww. You don't want that. You will need to insert a nested table in your second row and adjust the cellpadding to give you a desired margin around it. Your table's HTML should now look like this

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100%" height="50" background="top_border.jpg">&nbsp;</td>
  </tr>
  <tr>
    <td><table border="0" cellspacing="20" cellpadding="0" width="100%">
        <tr>
            <td width="100%">
                 <!--insert your page content here--!>
            </td>
        </tr>
    </table>
    </td>
  </tr>
</table>

where the darker green is the nested table and the 20 is the cellspacing (you can adjust this number to your liking) which adds whitespace around your text.

Tutorials

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

Pearl

Tiling Fonts at The Dingbatcave

previous page

Show us your support by a donation and we'll show our appreciation with a link back to your site. More information-->

Copyright © 1996-2008 Ann Stretton. All Rights Reserved. No part of this website may be copied or reproduced. Permission is not given under any circumstances to use any of the graphics or art on this site for any purpose whatsoever with the sole exception of the items offered in the webgraphics area in accordance with the terms of use.