CSS background-position property

The background-position sets the background image position.

Possible values are left, right, center, percentage, pixels, and others.

The default position is top left (0 0).

Example

#

A background image with background-position set to center.

<style>
  .bg-center {
    background-image: url("/img/css/cardplayers.jpg");
    background-repeat: no-repeat;
    background-position: center;
    height: 300px;
  }
</style>

<div class="bg-center"></div>

Using background-position

If length or percentage values are used, then the first value is the horizontal position (x) followed by the vertical position (y).

Syntax

background-position: value | x% y% | 
                     xpos ypos | initial | inherit

Values

#

Value Description
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
If you only specify one value, the second one will be center.
x% y% The first value is the horizontal position and the second value is the vertical.
The top left corner is 0% 0%. The right bottom corner is 100% 100%.
If you only specify one value, the other value will be 50%.
Default value is: 0% 0%.
xpos ypos The first value is the horizontal position and the second value is the vertical.
The top left corner is 0 0. Units can be any CSS units (px, em, and so on).
If you only specify one value, the other value will be 50%.
You can also mix % and px.
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different background-position values.

<style>
  .bg-example {
    background-image: url("/img/css/cardplayers.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    height: 350px;
  }
</style>

<div class="bg-example"></div>

Browser support

This table shows when background-position support started for each browser.

Chrome
1.0 Dec 2008
Firefox
1.0 Nov 2004
IE/Edge
4.0 Sep 1997
Opera
3.5 Nov 1998
Safari
1.0 Jun 2003

You may also like

Guides