Modifying a div's background img x position.

Soldato
Joined
4 Mar 2010
Posts
5,038
Hiya chaps, i'm trying to make a div's background image move along it's x axis but I'm have a little trouble. I don't know if i'm accessing it incorrectly or what?

I've validated all files so I'm guessing I'm doing something stupid.

Here's the code and mark up.

Any help would be appreciated.

Ruckus :)

html
PHP:
<!DOCTYPE html>
<html>

<head>
<script src="scroll.js" type="text/javascript" ></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Scrolling</title>
</head>

<body>
<div id="header" onload="setInterval(headerScroll(), 16)"></div>

</body>

</html>

javascript
PHP:
var imageX = document.getElementById('header').style.image.backgroundPosition.x;

function headerScroll()
{	
	//When image scrolls to it's maximum length reset to starting position els increment position by 1 pixel
	if(imageX >= 1024)
	{
			imageX = 0;
	}
	else
	{
		imageX++;
	}
	
	
}

// 1000/60 ~ 16 = 60 fps
setInterval(headerScroll(), 16);

css
PHP:
body{
	background-color: #000000;
	padding: 0px;
	border: 0px;
	margin: 0px;
}

#header{
	height: 96px;
	display:block;
	background-image: url(skyscroll-1024-96.jpg);
	background-repeat: repeat-x;
	background-position: 0px;

	
	}	
	
main{
	background-color: #ff00ff;

	}
 
Soldato
OP
Joined
4 Mar 2010
Posts
5,038
Thanks bud, I'm still playing around with this and pulling my hair out (alittle). :)

It's strange, I can't pull the values. I'm getting either null or undefined if I go deep into the node or it's returning what seems it's data type ie [Object namedNodeMap] [Object Attr].

This is very annoying as I could move an image easily with another language :o
 
Back
Top Bottom