style.backgroundPosition (Property)

The grid offset position for the background image.


CSS level - 2
DOM level - 2
JavaScript - 1.5
JScript - 3.0
Internet Explorer - 4.0
Netscape - 6.0
Property/method value type:String primitive
JavaScript syntax:-myStyle.backgroundPosition
CSS syntax:background-position: anX
Argument list:anXA value describing the X coordinate position
aYA value describing the Y coordinate position

This property defines the reference position for the background image relative to the top left corner of the extent rectangle containing the styled element.

Like the background property, this is a convenience property which can be used instead of specifying the X and Y values separately.

This value should have both a top and a left position specified with a space character in between them. If you omit the second value, the first and only value will be assumed to apply to the horizontal axis while the value 50% will be used by default for the vertical axis.

The positioning of the image includes the padding space around the styled element.

Oddly enough, the default measurement units for this property are percentages. You will achieve a more accurate positioning effect if you specify the value in pixels.

You can use the following keywords for vertical positioning:

These keywords can be used for horizontal positioning:


Example code:

   // Example background position assignments
   myStyle.backgroundPosition = "top left";
   myStyle.backgroundPosition = "10 left";
   myStyle.backgroundPosition = "top 20";
   myStyle.backgroundPosition = "50% 50%";
   myStyle.backgroundPosition = "25% 0";

See also:Measurement units, style.background