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).
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>
If length or percentage values are used, then the first value is the horizontal position (x) followed by the vertical position (y).
background-position: value | x% y% |
xpos ypos | initial | inherit
| 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. |
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>
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 |
