Moving Backgrounds

The first order of business is to select the type of background we want to use. Types that are appropriate are scenes such as clouds, sky, oceans, stars etc. or textured backgrounds. The background image width should be your screen width and the height should be about your screen height to achieve the best effect. The screen dimensions used for this page are width=1366px and height=1310px. Now the chosen background has to be re-sized to double the screen width and to height of your web page.

create a new div, say bg with these parameters
now create the div holding a table with the bg dimensions
the completed div will look like this

Now lets assemble the three components necessary to construct the web page.

Script is the engine that moves the background
Style is where elements are named and attributes are defined and positioned
Body is where the page text and images are defined. The moving background is located here.

script	style	body
<script> function move1(){ var step=2; var x=document.getElementById('bg').offsetLeft; if(x < 0 ) {x= x +step; document.getElementById('bg').style.left= x + "px"; setTimeout('move1()',140);}<!--lower=faster speed--> else { setTimeout("move2()",10);} } function move2(){ var step=-1366;<!--snaps background back to-1366px--> var x=document.getElementById('bg').offsetLeft; if(x > -1366 ) {x= x +step; document.getElementById('bg').style.left= x + "px"; setTimeout('move2()',10);} else { setTimeout("move1()",10);} } </script>	<style> body{background-color:#00513; color:#ffd700; text-align;center; margin:0 auto; overflow-x:hidden; }<!--see note one--> #bg{ position:absolute;left:-1366px;top:0px; } .center{ margin-left:auto;margin-right:auto; text-align:center; } #bot-cover{<!--see note two--> position:absolute;left:0px;top:1150px; } #cowboy{position:fixed;left:1100px; top:210px;z-index:2;<!--see note three--> } </style> </style>	<body onload="move1()"> <div id=bg> <table background="b/75.jpg" width=2732 height=1310><tr><td> </td></tr></table> <img src="b/75.jpg" width=2732 height=1310 alt=moving bg> </div> <div id=cowboy> <img src="ranch-hand.gif" width=250 height=385 alt=cowboy> </div> </body>

overflow-x:hidden; is required as the background image is twice the screen width.
The bottom cover will cover the moving background. Artistic considerations will determine its vertical location
The z-index must be taken into consideration when using images as an image is being used as a pseudo background
The height of the image used as the moving background will determine the depth of moving background