CSS background-position controls where a background image sits inside its background positioning area. Use center for a centered image, percentages to align matching points in the image and area, lengths for coordinate offsets, or edge-offset syntax to preserve a gap from an edge.
What does background-position do?
The property positions a background image; it does not move or align the element itself. Its reference area is determined by background-origin. The property applies to all elements and is not inherited. Its initial value is 0% 0%, which places the image at the top-left.
MDN describes it as setting “the initial position for each background image.” See the MDN background-position reference and the normative definition in the CSS Backgrounds and Borders Module Level 3.
How do the values work?
With two values, the first is horizontal and the second is vertical. For example, 25% 75% specifies horizontal and vertical percentage alignment. Keyword pairs can be written in either order: left top and top left are equivalent.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
- A single
leftorrightkeyword positions the image horizontally and centers it vertically. - A single
toporbottomkeyword positions it vertically and centers it horizontally. - A single length or percentage sets the horizontal position and centers the vertical position.
- With two values, use the horizontal value first and the vertical value second.
/* Center the image on both axes */
background-position: center;
/* Horizontal, then vertical */
background-position: 25% 75%;
/* Length coordinates */
background-position: 10px 20px;Why doesn’t 50% mean halfway across the container?
A percentage aligns the same percentage point in the image and in the background positioning area. The offset is calculated from the difference between the area’s size and the image’s size, not simply as a percentage of the container width or height. Thus, 50% 50% aligns the image’s midpoint with the area’s midpoint.
This distinction matters when the image is larger than its positioning area: the size difference is negative, so the percentage can produce a negative offset while keeping the same alignment relationship. The resulting pixel offset therefore depends on both image and area dimensions.
Which positioning syntax should you use?
| Intent | Example | What it specifies |
|---|---|---|
| Use a familiar anchor | center or left top |
Center the image or align it to named edges. |
| Keep alignment proportional as dimensions change | 25% 75% |
Align the corresponding percentage points in the image and area. |
| Set coordinate offsets | 10px 20px |
Specify horizontal and vertical length positions. |
| Maintain a specific gap from edges | right 20px bottom 10px |
Place the image with a 20px gap from the right and a 10px gap from the bottom. |
Edge-offset values keep each distance attached to its edge keyword. For instance, bottom 10px right 20px expresses the same edge-gap intent with the vertical edge first.
How do you position multiple background images?
Provide comma-separated positions in the same order as the background images. Each layer can have its own position:
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
background-position: left top, center;The first position applies to the first image layer, and the second to the next. For the shorthand, place a slash between background-position and background-size:
background: url("image.jpg") center / cover no-repeat;In this example, center is the position and cover is the size. See MDN’s background shorthand reference and its backgrounds and borders learning guide.
Browser support and syntax considerations
MDN marks background-position as Baseline and widely available, with browser availability dating to July 2015. Its reference also notes that the documented grammar reflects newer CSS modules and that not every browser may implement every newer syntax feature. If relying on newer logical-position keywords, check compatibility for the browsers your project supports rather than assuming uniform support.
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
