Entry
How do you move the background?
How do you move the background?
Mar 30th, 2001 07:59
Al Sparber, Martin Honnen,
There is a CSS property
background-position
which is scripted as in IE4+ and NN6 as
elementRefeference.style.backgroundPosition
and takes values for the x (horizontal) and y (vertical) position e.g.
<body style="background-image: url(kiboInside.gif);
background-position: 0px 0px;"
>
Unfortunately the IE4 and IE5.5 behave differently; the following
example creates a continous stream of background images from left to
right in IE5.5 while in IE4 the background is moved out to the right
but not replaced from the left. NN6 is buggy and doesn't move the
background at all.
<HTML>
<HEAD>
<SCRIPT>
var x = 0;
var step = 2;
var tid;
function moveBackground () {
x += step;
document.body.style.backgroundPosition = x + 'px 0px';
window.status = 'body.style.backgroundPosition: ' +
document.body.style.backgroundPosition;
}
</SCRIPT>
</HEAD>
<BODY STYLE="background-image: url(kiboInside.gif);"
ONLOAD="tid = setInterval('moveBackground()', 20)"
>
</BODY>
</HTML>
Just playing, but if you change the function a bit, it can work (98%)
in NN6...
<HTML>
<HEAD>
<script lanuguage="javascript">
function p7_moveBG(x,y,a,c) {
x=parseInt(x);y=parseInt(y);
a=parseInt(a);c=parseInt(a);
x+=a;y+=a;
if(document.all) {z=document.body.offsetHeight;
}else{z=window.innerHeight;}
if(y>z) y=1;
document.body.style.backgroundPosition = x + 'px ' + y +'px';
p7bg = setTimeout("p7_moveBG(\""+x+"\",\""+y+"\",\""+a+"\")",c);
}
</script>
<style type="text/css">
<!--
body { background-color: #CCCCCC; background-repeat: repeat-x}
-->
</style>
</HEAD>
<BODY STYLE="background-image: url(Mozfall.gif);" onLoad="p7_moveBG
(0,0,1,20)">
<table width="80%" border="0" cellspacing="0" cellpadding="0"
align="center" bgcolor="#666666">
<tr>
<td>
<table width="100%" border="0" cellspacing="1" cellpadding="24">
<tr>
<td bgcolor="#C5C5BA">
<p>Lorem ipsum dolore sit PVII, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</BODY>
</HTML>
I can't see using this on one of my pages... it's really processor
intensive, but I'm sure someone may find this useful :-)
