The 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

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

Example

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

html<div id="elem"></div>

css#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:

html<div id="elem"></div>

css#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:

html<div id="elem"></div>

css#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:

html<div id="elem"></div>

css#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:

html<div id="elem"></div>

css#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:

html<div id="elem"></div>

css#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:

html<div id="elem"></div>

css#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:

html<div id="elem"></div>

css#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:

html<div id="elem"></div>

css#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:

html<div id="elem"></div>

css#elem {
  background-position: center 30px;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

See also