background-position syntax

trying to dynamically move background

[Twister77]

I'm trying to have the background image of a div layer move when you mouse over an object and I cant seem to get it to work so I assume i've got something wrong with the syntax.

Sample:

<div id="layer" style="background-image: url(images/bg.gif);">

<div onMouseOver="layer.style.background-position='100px 100px';">Move 100 pixels over</div>

Nothing happens when you mouse over, no errors either.

[garann]

For CSS properties, you usually translate them to Javascript by substituting "camel case" for CSS' dashes. So you might try it this way:

document.getElementById('layer').style.backgroundPosition

(Added: Also, you might not want to rely on the DOM to know what you mean by "layer" - better to tell it explicitly to find the object with that ID, as above.)

[Twister77]

nice that worked, thank you!