Modifying a div's background img x position.

UncleRuckus · 15 Sep 2013 at 21:53

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;

	}

Tripnologist · 15 Sep 2013 at 23:44

You'll need to remove the '.x' from '.style.image.backgroundPosition.x' and go about it that way.

Edit: Sorry, to be more clear, you'll need to grab backgroundPosition and dump it into an array and then get the x position from that.

Further edit: You could also try backgroundPositionX, but it may not work in Firefox.

UncleRuckus · 16 Sep 2013 at 19:43

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

Modifying a div's background img x position.

UncleRuckus

UncleRuckus

Tripnologist

Tripnologist

UncleRuckus

UncleRuckus