Make note of the pattern's height. This image is 42 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="topborder1.jpg"). Set the height of that row to "42," as the image is 42 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. 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

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.