background-position

The background-position property specifies the position at which a background image starts.

Syntax

The default setting is to start the background image at the top-left corner of the element, and repeat it both horizontally and vertically.

div.ex {
  background-image: url('example-image.png');
  background-position: center;
}

Values

left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom

If only one keyword is specified, the other value will be “center”.

x% y%
First value is the horizontal position. Second value is the vertical position. The top left corner is equal to 0% 0%. The bottom right corner is 100% 100%. Default value is 0% 0%. If only one value is specified, the other value will be 50%. Percentages can be mixed with CSS units (px, etc.)

xpos ypos
First value is the horizontal position. Second value is the vertical position. The top left corner is equal to 0 0. Values are specified in CSS units like px, em, etc. If only one value is specified, the other value will be 50%. Percentages can be mixed with CSS units.

initial
Sets the property to its default value.

inherit
Inherits this property’s value from its parent item.

Browser Compatibilty

Demos

Have a code example of background-position? Submit a codepen.io demo and we'll showcase it here ↴