background-position


                                background-position: [ [ <percentage> | <length> | left | center | right ]

                                                       [ <percentage> | <length> | top | center | bottom ]? ] | 

                                                     [ [ left | center | right ] || [ top | center | bottom ] ] | inherit

Initial:	0% 0%
Applies To:	all elements
Inherited:	no
Percentages:	refer to the size of the box itself
Media:	visual

DOM
Example | bottom
Example | center
Example | left
Example | length
Example | percentage
Example | right
Example | top
Example | DOM
References


                                [window.]document.getElementById("element-id").style.backgroundPosition = "background-position";

<html>
  <head>
    <title>background-position</title>
  </head>
  <body id="id1">
    <a href="/" onmouseover="mouseover1();">top</a>
    <a href="/" onmouseover="mouseover2();">bottom</a>
    <a href="/" onmouseover="mouseover3();">left</a>
    <a href="/" onmouseover="mouseover4();">right</a>
    <a href="/" onmouseover="mouseover5();">center</a>
    <a href="/" onmouseover="mouseover6();">length</a>
    <a href="/" onmouseover="mouseover7();">percentage</a>
    <a href="/" onmouseover="mouseover8();">initial</a>
  </body>
  <script type="text/javascript">
    function mouseover1() {
      document.getElementById("id1").style.backgroundPosition = "top";
    }
    function mouseover2() {
      document.getElementById("id1").style.backgroundPosition = "bottom";
    }
    function mouseover3() {
      document.getElementById("id1").style.backgroundPosition = "left";
    }
    function mouseover4() {
      document.getElementById("id1").style.backgroundPosition = "right";
    }
    function mouseover5() {
      document.getElementById("id1").style.backgroundPosition = "center";
    }
    function mouseover6() {
      document.getElementById("id1").style.backgroundPosition = "100px 100px";
    }
    function mouseover7() {
      document.getElementById("id1").style.backgroundPosition = "100% 100%";
    }
    function mouseover8() {
      document.getElementById("id1").style.backgroundPosition = "0% 0%";
    }
    document.getElementById("id1").style.backgroundImage  = "url(/assets/png/HappyFace.png)";
    document.getElementById("id1").style.backgroundRepeat = "no-repeat";
  </script>
</html>

W3C Cascading Style Sheets, level 1

W3C Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification

CSS

DOM

Example | bottom

Example | center

Example | left

Example | length

Example | percentage

Example | right

Example | top

Example | DOM

References