CSS Attributes Index Color and Background Attributes
Sets or retrieves the position of the element's background.
| CSS |
{ background-position: [ percentage | length ] {1,2} | [ 'top' | 'center' | 'bottom' ] || [ 'left' | 'center' | 'right' ] } |
| Script |
object.style.backgroundPosition = sPosition ] |
| percentage |
One or two percentages. |
| length |
One or two floating-point numbers and corresponding absolute units designators ( cm, mm, in, pt, pc, or px ) or relative units designators ( em or ex ). |
| top |
The vertical alignment is at the top. |
| center |
The vertical alignment is centered. |
| bottom |
The vertical alignment is at the bottom. |
| left |
The horizontal alignment is to the left. |
| center |
The horizontal alignment is centered. |
| right |
The horizontal alignment is to the right. |
The property is read/write with a default value of 0% 0%; the CSS attribute is not inherited.
The {1,2} indicates that one or two values may be specified. If only one is set, that value applies to the horizontal coordinate, and the vertical is set to 50%. If both are set, the first value applies to the horizontal coordinate and the second value applies to the vertical.
Setting the values to 0% 0% positions the background-image to the upper left corner of the element’s content excluding the padding.
Specifying right center has the following effect: Because right is assumed to be an x-coordinate direction, right will overwrite the center value; accordingly, the background will shift right.
This property may be set together with the other background properties using the background composite property.
The following examples demonstrate use of inline event handlers to dynamically set the position of an element’s background image. Both methods yield the same effect.
The sample below defines background-position style attributes in an embedded stylesheet, and invokes calls to the stylesheet in response to mouse events.
<style type="text/css">
<!--
body {
background: url( "../shared/images/back.jpg" )
no-repeat center }
.topLeft {
background-position: "top left" }
.bottomRight {
background-position: "bottom right" }
-->
</style>
...
<body id='theBody'">
...
<div onmouseover="theBody.className='topLeft'"
onclick="theBody.className='bottomRight'"
onmouseout="theBody.className=''">
...
</div>
Show me
The sample below uses inline event handlers to dynamically change the position of an object’s background image in response to mouse events.
<div onmouseover="body.style.backgroundPosition='top right'"
onclick="body.style.backgroundPosition='bottom left'"
onmouseout="body.style.backgroundPosition='center'">
Show me
background, background-attachment, background-color, background-image, background-repeat