Property background-position

Specifies the position of a background image

background-position-x
Specifies the position of a background image on
x-axis

background-position-y
Specifies the position of a background image on
y-axis

It has multiple ways of positioning elements:

• Keyword values (top, right, bottom, left, center)
• Percentage values. E.g: 50%
• Length values. E.g: 20px 2.5rem
• Edge offset values. E.g: top 20px left 10px

The coordinates system starts from the top-left
corner, with the default value of 0% 0%.

.element {
  background: url(cool.jpg) top left/50px 50px no-repeat;
  /* is the same as */
  background: url(cool.jpg) left top/50px 50px no-repeat;
}