I am trying to set up a webpage banner that contains a background of the sky and clouds. Superimposed in the center will be an image of an airplane with a transparent background.
I want the sky to scroll continuously to the left behind the airplane. I am having problems with the background not being visible, not moving as expected, the airplane not being visible, and just disappointment in general.
I think the background of a div will not be visible if there are no internal contents because it will be sized to zero. So I introduced another transparent image to force the size of the main div. Still no joy.
Here is my code. Note that I don't have my timers set up yet, just a button to test background movement.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Texas Flight</title>
<link rel=Stylesheet type="text/css" href="static/css/styles.css" />
<script>
currpos = 0;
function movesky(distance)
{
alert("distance = " + distance);
currpos += distance;
alert("position = " + currpos);
document.getElementById("sky").style.backgroundPositionX = currpos + "px";
}
</script>
</head>
<body>
<div id='sky' class='skyslide' background-image='static/image/wideclouds01b.jpg'>
<img src="static/image/transparent150.png" />
<img id="planesprite" src="static/image/DiamondDA20-A1.png"/>
</div>
<input type='button' onclick="movesky(10);" value="move it"></input>
</body>
</html>
Code:
body
{
}
#sky
{
display: block;
position: relative;
height: 150px;
min-width: 100%;
max-width: 100%;
text-align: center;
background-image: url('static/image/wideclouds01b.jpg');
background-repeat:repeat-x;
overflow: hidden;
}
#planesprite
{
position: relative;
top: -170px;
}
Any help is welcome, including insults for stupid techniques
.
