Posted by Christoph on 06/17/07 11:57

Using CSS, I want to set images for the left and right margins/borders of
the page. That seems like it would be simple enough but here's the twist: I
want one image to display on the top left/right and then another image
repeating for the rest of the margins/border. So bascially the page would
look something like this:

A = Image 1
B = Image 2
C = Image 3, repeating on both sides

A B
C Web Page Text Here C
C Web Page Text Here C
C Web Page Text Here C
C Web Page Text Here C
C Web Page Text Here C
C Web Page Text Here C

with C repeating all the way to the bottom of the page regardless of how
large or small the page is. Right now, I'm accomplishing this by using 2
tables, one outer and one inner. It looks something like this:

<table width="100%" height="100%">
<tr>
<td valign="top" align="left" height="100%">
<table border=0 height="100%" cellspacing=0 cellpadding=0>
<tr>
<td valign="top" height="387" width="36">
<img src="/Image1.gif" border="0" alt="">
</td>
</tr>
<tr>
<td background="/Image3.gif" width="56" height="100%"></td>
</tr>
</table>
</td>
<td>
Web Page Text Here<br>
Web Page Text Here<br>
Web Page Text Here<br>
Web Page Text Here<br>
Web Page Text Here<br>
Web Page Text Here<br>
</td>
<td valign="top" align="left" height="100%">
<table border=0 height="100%" cellspacing=0 cellpadding=0>
<tr>
<td valign="top" height="387" width="36">
<img src="/Image2.gif" border="0" alt="">
</td>
</tr>
<tr>
<td background="/Image3.gif" width="56" height="100%"></td>
</tr>
</table>
</td>
</tr>
</table>

but there has to be some way I can do the same thing much more elegantly
with CSS. I'm not necessarily looking for someone to tell me step by step
how to do this. What I'm more looking for is just a pointer to where I
should start learing how do implement this. I've looked at various CSS
pages, tutorials, how-to's, etc but nothing I saw addressed anything like
this.

thnx,
Christoph

[Back to original message]