CSS Background-position Properties

The Background-position property sets the starting position of the background image.

This property sets the position of the background image (defined by Background-image), and the background image will start at this point if it is to be repeated.

Tip: You need to set the Background-attachment property to "fixed" to ensure that the property works correctly in Firefox and Opera.

Default value: 0% 0%
Inheritance: No
Version: CSS1
JavaScript syntax: object.style.backgroundposition= "center"
All browsers support the Background-position property.

Note: The property value "Inherit" is not supported by any version of Internet Explorer, including IE8.

Possible values
Top left
Top Center
Top Right
Center left
Center Center
Center Right
Bottom Left
Bottom Center
Bottom right

If you specify only one keyword, then the second value will be "center". Default value: 0% 0%.

x y% The first value is a horizontal position and the second value is the vertical position. The upper-left corner is 0% 0%. The lower right corner is 100% 100%. If you specify only one value, the other value will be 50%.

xpos ypos The first value is a horizontal position, and the second value is the vertical position. The upper-left corner is 0 0. Units are pixels (0px 0px) or any other CSS unit. If you specify only one value, the other value will be 50%. You can mix the% and position values.

Example 1:

Example 2:

Example 3:
CSS Background-position Properties