HTML: How to use background image of a table for the border of a web page

The above image is used as a background image for the following table.

The image on the left is the backgroud image of the table.

The image repeats itself to displaying a seamless border picture vertically downwards.

This table consists of two columns. The left column
(width = "100" ) is reserved for the image.

The right column is used to display text such as the text here.

The border of the table is set to 0.

The following is the HTML code for the above table.

<table width="600" border="0"
background="Border-L-diamond-blue.gif">

<tr>

<td width="100"></td>

<td>
<p>The image on the left is the backgroud image of the table.</p>

<p>The image repeats itself to displaying a seamless border picture vertically downwards. </p>

<p>This table consists of two columns. The left column (width="100") is reserved for the image. </p>

<p>The right column is used to display text such as the text here. </p>

<p>The border of the table is set to 0. </p>

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</td>

</tr>
</table>


Click the following text box to copy the HTML code.

Click the following to download the image: Border-L-diamond-blue.gif

The border are 1600 pixels wide to accommodate larger monitors and higher resolutions.

View more examples: using background image (table) for the border of a web page

mount zion, holy temple 圣殿-锡安山导览

Holy temple - Tour of Mount Zion
圣殿-锡安山导览

waltz appreciation, 华尔兹表演欣赏 Waltz & Music Appreciation
  - Nocturne by Secret Garden
华尔兹表演欣赏

Related articles:

Pambytes - Left borders backgrounds and many more

Web Publishing, HTML - useful links, tips, Graphic Gallery

No comments: