CSS Background Position

The CSS background-position property controls where a background image is placed within its background positioning area.

Background images begin at the top left by default. The background-position property lets you move an image horizontally and vertically using position keywords, percentages, lengths, or offsets from the edges of the element.

Default Background Position

The initial value of background-position is 0% 0%. This places the background image at the top left of its background positioning area.

.box {
  background-image: url("images/landscape-1200x800.jpg");
  background-repeat: no-repeat;
  background-position: 0% 0%;
}

The first value controls the horizontal position and the second controls the vertical position.

Position Keywords

Position keywords provide a simple way to place a background image along the horizontal and vertical edges or in the center.

Common keywords include left, center, right, top, and bottom.

.box {
  background-position: center;
}

A single center value centers the image horizontally and vertically.

.box {
  background-position: right bottom;
}

This places the image against the right and bottom edges of the background positioning area.

Two-Value Positioning

Two values can be used to control the horizontal and vertical position of a background image.

.box {
  background-position: left bottom;
}

For length and percentage pairs, the first value normally controls the horizontal position and the second controls the vertical position.

.box {
  background-position: 30px 50px;
}

This positions the image 30 pixels horizontally and 50 pixels vertically from the top-left starting position.

Percentage Positions

Percentage values position a point in the background image relative to the corresponding point in the background positioning area.

.box {
  background-position: 50% 50%;
}

A value of 50% 50% aligns the center of the image with the center of the positioning area, which is equivalent to center center.

.box {
  background-position: 100% 100%;
}

A value of 100% 100% aligns the bottom-right corner of the image with the bottom-right corner of the positioning area.

This differs from simply moving the image by a percentage of the element's width and height. Both the size of the background image and the size of the positioning area are involved in percentage positioning.

Length Positions

CSS length values such as pixels can be used when a background image needs a specific offset.

.box {
  background-position: 40px 25px;
}

This positions the image 40 pixels from the left and 25 pixels from the top of the background positioning area.

Other CSS length units can also be used when appropriate.

Positioning from an Edge

The extended background-position syntax can specify an edge followed by an offset from that edge.

.box {
  background-position: right 20px bottom 30px;
}

This places the right edge of the background image 20 pixels from the right edge and its bottom edge 30 pixels from the bottom edge of the positioning area.

Edge offsets are useful when an image needs to remain a specific distance from the right or bottom rather than being positioned from the top left.

Background Position and Repeat

The starting position of a background image also affects where a repeating background pattern begins.

.box {
  background-image: url("images/pattern-200x200.png");
  background-position: center;
  background-repeat: repeat;
}

When an image repeats, additional tiles extend from the positioned background image to fill the background area.

When positioning a single decorative image or photograph, background-repeat: no-repeat is commonly used so the position of one image is easy to control.

Background Position Example

The following example uses our landscape image and displays it at its natural size without repeating. Because the stones are located toward one side of the photograph, changes in position are easy to recognize.

.box {
  background-image: url("images/landscape-1200x800.jpg");
  background-repeat: no-repeat;
  background-position: center;
}

Open the example in the editor and change center to left, right, left bottom, or right bottom. You can also try percentage and pixel values to position the photograph more precisely.

Play in Editor