1. css
  2. /properties
  3. /background-position

background-position

Definition

The background-position property in CSS specifies the position of a background image within an element. It can be used to position the background image horizontally and vertically within the element's content, padding, or border.

Examples

Positioning the background image at the left edge of the element:

.left {
  width: 200px;
  height: 200px;
  background-image: url('image.jpg');
  background-position: left;
}

Centering the background image horizontally within the element:

.center {
  width: 200px;
  height: 200px;
  background-image: url('image.jpg');
  background-position: center;
}

Positioning the background image at the right edge of the element:

.right {
  width: 200px;
  height: 200px;
  background-image: url('image.jpg');
  background-position: right;
}

Positioning the background image 50 pixels from the top and left edges of the element:

.distance {
  width: 200px;
  height: 200px;
  background-image: url('image.jpg');
  background-position: 50px 50px;
}

Positioning the background image 50% of the element's width and 100% of the element's height:

.percentage {
  width: 200px;
  height: 200px;
  background-image: url('image.jpg');
  background-position: 50% 100%;
}

Values

ValueDescription
leftThe background image is positioned at the left edge of the element. This is the default value.
centerThe background image is centered horizontally within the element.
rightThe background image is positioned at the right edge of the element.
topThe background image is positioned at the top edge of the element.
bottomThe background image is positioned at the bottom edge of the element.
<length>The background image is positioned at the specified distance from the left edge of the element. The distance can be specified in any valid CSS length unit, such as pixels (px), ems (em), or percentages (%).
<percentage>The background image is positioned at the specified distance from the left edge of the element, as a percentage of the element's width.

Best Practices

  • Use the background-position property in combination with the background-image property to specify the position of a background image within an element.
  • If the element has a fixed size, you can use the <length> or <percentage> values to specify the position of the background image in pixels or as a percentage of the element's size.
  • If the element has a flexible size, you can use the left, center, right, top, or bottom values to position the background image relative to the edges of the element.
  • Use the background-position-x and background-position-y properties to specify the position of the background image in the horizontal and vertical dimensions separately.
  • If you want to position the background image at the center of the element, you can use background-position: center center.
  • If you want to tile the background image, you can use the background-repeat property.
  • Use the background-size property to specify the size of the background image.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes