CSS background-position Property

CSS background-position Property

The background-position property in CSS controls the starting position of a background image within an element, both horizontally (X-axis) and vertically (Y-axis).

1. Syntax

selector {
  background-position: x-value y-value;
}

• The first value defines the horizontal position (background-position-x).

• The second value defines the vertical position (background-position-y).

• If only one value is provided, the second value defaults to center.

2. Accepted Values

Value	Description
left top	Aligns the background to the top-left corner.
left center	Aligns the background to the left and vertically centered.
left bottom	Aligns the background to the bottom-left corner.
center top	Aligns the background horizontally centered and to the top.
center center	Centers the background both horizontally & vertically.
center bottom	Aligns the background horizontally centered and to the bottom.
right top	Aligns the background to the top-right corner.
right center	Aligns the background to the right and vertically centered.
right bottom	Aligns the background to the bottom-right corner.
<length>	Defines a precise position in px, em, rem, etc.
<percentage>	Positions the background relative to the element’s size (50% 50% = center).

3. Example – Using background-position: center center;

.box {
  width: 400px;
  height: 300px;
  background-image: url("image.jpg");
  background-position: center center;
  background-repeat: no-repeat;
}

✅ The background image will be perfectly centered.

4. Example – Using background-position: left top;

.box {
  width: 400px;
  height: 300px;
  background-image: url("image.jpg");
  background-position: left top;
  background-repeat: no-repeat;
}

✅ The background image will be placed at the top-left corner.

5. Example – Using Length Values (px, %)

.box {
  width: 400px;
  height: 300px;
  background-image: url("image.jpg");
  background-position: 50px 100px;
  background-repeat: no-repeat;
}

✅ The background image is positioned 50px from the left and 100px from the top.

.box {
  width: 400px;
  height: 300px;
  background-image: url("image.jpg");
  background-position: 75% 25%;
  background-repeat: no-repeat;
}

✅ The background image is positioned 75% across from the left and 25% down from the top.

6. Best Practices

✔ Use center center for logos & full-background images.
✔ Use % values for responsive layouts.
✔ Combine with background-size: cover; for a perfect fit.