Background Repeat 1

This is one example of how you can have a background image repeated down the page.

This example shows a full image on either side of the page that is repeated downwards.
To create this effect a table is used that has a minimum of three TD cells set out as follows.
The size of the image is 75px x 100px

<Table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td background="bgrepeat.gif" width="75"> </td>

<td id="cell" valign="top" style="padding:5">Contents</td>

<td background="bgrepeat.gif" width="75"> </td>
</tr>
</table>

Each end cell has an image background with a fixed width denoted by the images width.
The center TD cell is used for your contents, this cell also determines the overall height.

As you add content to the center cell its height will increase, because the height of the outer cells will also increase this allows the image to repeat.

To ensure you finish with a full image at the end of the page a script is used to do the following:

  1. Get the height of the center cell.
  2. Divide the center cell height by the image height.
  3. Convert into the higher whole number.
  4. Increase the center cell height by whole number x image height

If an additional repeat of the image is required at the end of the page change the value of variable offset to suit.

<script type="text/javascript">
<!--
bgImage=new Image()
bgImage.src="bgrepeat.gif"

offset=0
function setSize(){
cellH=document.getElementById("cell").offsetHeight
imgH=bgImage.height
numOfRepeats=Math.ceil(cellH/imgH)
document.getElementById("cell").height=((numOfRepeats+offset)*imgH)+"px"
}

// add onload="setSize()" to the opening BODY tag

// -->
</script>