CSS background-position property

The background-position property can be used to set the starting point of a background image.

This property is NOT inherited

Possible values

Value	Description
top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right	Specific location where to position the background image
x% y%	the horizontal (x) and vertical (y) starting points of the background image in percentage of the elements width and height itself
xPos yPos	the horizontal (x) and vertical (y) starting points of the background image

NOTE: If you are using keywords to position a background image - if you specify just one keyword, the second keyword will be "center" by default

NOTE: If you are specifying positioning with percentage, the top left corner is 0% 0% and the bottom right corner is 100% 100%, and if you specify just one value, the other value will be 50% by default.

NOTE: If you are specifying positioning with units, they can be pixels or any other CSS units. The top left corner is 0, 0. If you specify just one value, the other value will be 50% by default.

Example

body { background-image: url(/images/apple.jpg); background-repeat: no-repeat; background-position: top right; }

Output:

This page has a background image in its top right corner

Javascript

You can access this property with Javascript:

element.style.backgroundPosition = "top left";

Other background properties

background
background-attachment
background-color
background-image
background-repeat

CSS background examples

More CSS examples