The following are examples of how you can have a background image scroll
Enter your image name at variable bgImage
You can set the script to scroll left, right, up, or down by stating which direction you want with variable dir
When scrolling in a horizontal direction the background border is placed at the top of the page. You can adjust this position with variable posY
When scrolling in a vertical direction the background border can be placed to the left or the right of the page as stated by variable rightSide.
You can also adjust the position from the left with variable posX
<script language="JavaScript">
<!--
// jeff
//www.huntingground.freeserve.co.uk
bgImage="image031.jpg"
dir="left" // left, right, up, down
rightSide=1 // 0 = no 1 = yes || if scrolling in a vertical direction position the border to the right of the div
PosY=0 // horizontal scrolling default top position
posX=0 // vertical scrolling default left position, unless rightSide is yes
onload=function initBgScroll1(){
bgImg=new Image()
bgImg.src=bgImage
imageheight=bgImg.height
imagewidth=bgImg.width
currentPos= 0
bgDiv=document.getElementById("bgscroll1")
bgDivWidth=bgDiv.offsetWidth
bgDivHeight=bgDiv.offsetHeight
posXRight=bgDivWidth-imagewidth
bgDiv.style.backgroundImage="url("+bgImage+")"
if(dir=="left"||dir=="right"){bgDiv.style.backgroundRepeat="repeat-x" ; scrollBgH()}
if(dir=="up"||dir=="down"){bgDiv.style.backgroundRepeat="repeat-y" ; scrollBgV()}
}
function scrollBgH(){
if(dir=="left"){
currentPos-=2
if(currentPos<= -imagewidth){currentPos= 0}
}
else{
currentPos+=2
if(currentPos>= imagewidth){currentPos= 0}
}
bgDiv.style.backgroundPosition=currentPos+"px "+PosY+"px"
setTimeout("scrollBgH()",50)
}
function scrollBgV(){
if(dir=="up"){
currentPos-=2
if(currentPos<= -imageheight){currentPos= 0}
}
else{
currentPos+=2
if(currentPos>= imageheight){currentPos= 0}
}
if(rightSide==0){bgDiv.style.backgroundPosition=posX+"px "+currentPos+"px"}
else{bgDiv.style.backgroundPosition=posXRight+"px "+currentPos+"px"}
setTimeout("scrollBgV()",50)
}
// add onload="initBgScroll1()" to the opening BODY tag
//-->
</script>
<div id="bgscroll1" style="width:600;height:450px;border:2px ridge #878453;overflow:hidden;background: #DCD9B8 scroll">