how to put image-borders around forum

[aaron79]

like the title suggest i need help with image-borders. not borders around images, but actual background images that is repeated across x and y to give the illusion they are borders.

an example of what i want is http://www.hiveworkshop.com/


can anyone help?

[Beav`]

There's a couple of ways to do it, and it can depend on whether your site is a fixed width or fluid.

You can do with a tables with a bit of code in the header and footer. For example, in the header you'd have something like...

<table style="width: 100%;border: 0;" cellpadding="0" cellspacing="0">
<tr>
<td><img src="path_to_top_left_corner_image" style="border: 0" alt="top left" /></td>
<td style="width: 100%;background: url('path_to_repeating_top_background_image') repeat-x;"></td>
<td><img src="path_to_top_right_corner_image" style="border: 0" alt="top right" /></td>
</tr>
</table>

<table style="width: 100%;border: 0;" cellpadding="0" cellspacing="0">
<tr>
<td style="background: url('path_to_left_side_background') repeat-y"></td>
<td style="width: 100%;vertical-align: top">

<!-- your forum will show in this cell... -->

and in the footer have something like...

</td>
<td style="background: url('path_to_right_side_background') repeat-y"></td>
</tr>
</table>

<table style="width: 100%;border: 0;" cellpadding="0" cellspacing="0">
<tr>
<td><img src="path_to_bottom_left_corner_image" style="border: 0" alt="bottom left" /></td>
<td style="width: 100%;background: url('path_to_repeating_bottom_background_image') repeat-x;"></td>
<td><img src="path_to_bottom_right_corner_image" style="border: 0" alt="bottom right" /></td>
</tr>
</table>

You'll probably need some spacer images for the left and right background too.

There's other ways with div's and some absolute positioned images, but it all depends on your site layout and the background image you want to use.

[aaron79]

thank you so much! really appreciate it. great explanation and example too ..