This example shows an image on the right side of the page that is repeated downwards and finishes on a full image
To ensure you finish with a full image at the end of the div a script is used to do the following:
- Get the height of the div.
- Divide the div height by the image height.
- Convert into the higher whole number.
- Increase the div height by whole number x image height
The background image is stated in the style rule and within the script.
You can include a border and padding although bottom padding may not be effective..
If an additional repeat is required at the end of the page change the value of variable offset to suit.
<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<script type="text/javascript">
<!--
offset=0
bgImage=new Image()
bgImage.src="bgrepeat.gif"
function adjBg(){
el=document.getElementById("main")
isBorder=0
isPadding=0
if(el.currentStyle&&!window.opera){ // IE
if(document.compatMode!="CSS1Compat"){
if(parseInt(el.currentStyle.borderTopWidth)){isBorder+=parseInt(el.currentStyle.borderTopWidth)}
if(parseInt(el.currentStyle.borderBottomWidth)){isBorder+=parseInt(el.currentStyle.borderBottomWidth)}
}
else{
if(parseInt(el.currentStyle.paddingTop)){isPadding-= parseInt(el.currentStyle.paddingTop)}
if(parseInt(el.currentStyle.paddingBottom)){isPadding-= parseInt(el.currentStyle.paddingBottom)}
}
}
if(document.defaultView){ // Firefox
if(parseInt(document.defaultView.getComputedStyle(el,'').getPropertyValue("padding-top"))){
isPadding-= parseInt(document.defaultView.getComputedStyle(el,'').getPropertyValue("padding-top"))
}
if(parseInt(document.defaultView.getComputedStyle(el,'').getPropertyValue("padding-bottom"))){
isPadding-= parseInt(document.defaultView.getComputedStyle(el,'').getPropertyValue("padding-bottom"))
}
}
divH = el.offsetHeight
imgH = bgImage.height
numOfRepeats = Math.ceil(divH/imgH)
newHeight = (numOfRepeats+offset) * imgH
el.style.height=newHeight+isBorder+isPadding+"px"
}
// add onload="adjBg()" to the opening BODY tag.
// -->
</script>
<style>
#main{
border:2px solid red;
background:white url(bgrepeat.gif) repeat-y left top;
font-size:16px;
line-height:20px;
}
</style>
</HEAD>
<BODY onload="adjBg()">
<div id="main">
<p>This is some dummy text</p>
<p>This is some dummy text</p>
<p>This is some dummy text</p>
<p>This is some dummy text</p>
<p>This is some dummy text</p>
<p>This is some dummy text</p>
<p>This is some dummy text</p>
</div>
</BODY>
</HTML>