# background-position property

The `background-position` property specifies the position of an element's background image. The position can be set using any size units. The first value indicates a left indent, the second - a top indent.

You can also specify the position using keywords. In this case, the order of the values ​​is not important. Keywords for vertical: `top`, `center`, `bottom`. Keywords for horizontal: `left`, `center`, `right`.

## How to use keywords

To place an image with a keyword, you need to specify one value for the vertical and one for the horizontal. For example, if you specify the `top right` value, then the image will appear on top-right.

The order of the words is not important: you can write `top right`, or you can write `right top`. If there is a `center` keyword, it can be omitted. For example, `top center` is the same as just `top`. And `center center` is the same as just `center`.

## Syntax

`selector { background-position: two values ​​separated by a space; }`

## Example

By default, the background image will be in the top left corner:

`<div id="elem"></div>` `#elem { background-image: url("bg.png"); background-repeat: no-repeat; width: 400px; height: 300px; border: 1px solid black; }`

:

## Example

Let's place the background image in the top right corner:

`<div id="elem"></div>` `#elem { background-position: top right; background-image: url("bg.png"); background-repeat: no-repeat; width: 400px; height: 300px; border: 1px solid black; }`

:

## Example

Let's place the background image in the bottom right corner:

`<div id="elem"></div>` `#elem { background-position: bottom right; background-image: url("bg.png"); background-repeat: no-repeat; width: 400px; height: 300px; border: 1px solid black; }`

:

## Example

Let's place the background image right and center vertically:

`<div id="elem"></div>` `#elem { background-position: right center; background-image: url("bg.png"); background-repeat: no-repeat; width: 400px; height: 300px; border: 1px solid black; }`

:

## Example

Let's place the background image in the center of the block:

`<div id="elem"></div>` `#elem { background-position: center center; background-image: url("bg.png"); background-repeat: no-repeat; width: 400px; height: 300px; border: 1px solid black; }`

:

## Example

Let's place the background image at a distance of `20px` from the left and `40px` from the top:

`<div id="elem"></div>` `#elem { background-position: 20px 40px; background-image: url("bg.png"); background-repeat: no-repeat; width: 400px; height: 300px; border: 1px solid black; }`

:

## Example

Let's place the background image at a distance of `90%` from the left and `100%` from the top:

`<div id="elem"></div>` `#elem { background-position: 90% 100%; background-image: url("bg.png"); background-repeat: no-repeat; width: 400px; height: 300px; border: 1px solid black; }`

:

## Example

Let's place the background image at a distance of `30px` from the left and the bottom vertically:

`<div id="elem"></div>` `#elem { background-position: 30px bottom; background-image: url("bg.png"); background-repeat: no-repeat; width: 400px; height: 300px; border: 1px solid black; }`

:

## Example

Let's place the background image at a distance of `30px` from the left and center vertically:

`<div id="elem"></div>` `#elem { background-position: 30px center; background-image: url("bg.png"); background-repeat: no-repeat; width: 400px; height: 300px; border: 1px solid black; }`

:

## Example

Let's place the background image at a distance of `30px` from the top and center horizontally:

`<div id="elem"></div>` `#elem { background-position: center 30px; background-image: url("bg.png"); background-repeat: no-repeat; width: 400px; height: 300px; border: 1px solid black; }`

:

## See also

- the `background` property
  that is a shorthand property for a background

← →
↑
en ru