The background-position property sets where a background image starts inside an element. You can use keywords, percentages, or pixel values to place backgrounds exactly where you want them.
Move background images.
top, left, center.
Relative positioning.
Exact distances.
Horizontal and vertical.
Works with background-origin.
The background-position CSS property sets the initial position of a background image. It controls the horizontal and vertical placement of the background within the element’s background positioning area.
This is especially useful when the background does not fill the entire element, such as a small icon, badge, texture, or photo positioned in a corner or centered in a hero section.
To see background-position clearly, use background-repeat: no-repeat; and a smaller background-size so the image does not cover the whole box.
Apply background-position using one or two values:
selector {
background-position: <position>;
}.hero {
background-image: url("hero.jpg");
background-position: center;
background-size: cover;
}center, top, bottomtop left, bottom right50% 50%, 75% 25%20px 30px, 1rem 2remcenter top, right 20px bottom 10px0% 0%, which is equivalent to top left.center for keywords or 50% in some mixed cases depending on syntax.background-origin.| Question | Answer |
|---|---|
| Initial value | 0% 0% (top left) |
| Applies to | Background images of an element |
| Inherited | No |
| Animatable | Yes |
| Common use | Hero photos, corner icons, centered backgrounds |
The initial value of background-position is 0% 0%. That places the background at the top-left corner of the background positioning area.
These are the most common ways to set background-position.
| Value type | Example | Meaning |
|---|---|---|
| Keyword | background-position: center; | Centers the background in the element |
| Two keywords | background-position: top left; | Places the background in the top-left corner |
| Percentage | background-position: 50% 50%; | Centers using relative percentages |
| Length | background-position: 20px 30px; | Offsets the background by exact distances |
| Mixed | background-position: right 1rem bottom 1rem; | Combines edge keywords with offset distances |
keywordsEasy preset positions such as center, top left, and bottom right.
Best for quick layout choices.
percentagesPositions relative to the container size, such as 75% 25%.
Useful for responsive layouts.
pixelsExact offsets like 20px 30px for precise decorative placement.
Good for badges and icons.
mixedCombine keywords and lengths, such as center top or right 20px bottom 10px.
Flexible real-world syntax.
background-position vs background-origin| Property | Controls | Best for |
|---|---|---|
background-position | Where the background image is placed | Centering photos, corner icons, offset textures |
background-origin | Which box is used as the positioning area | Aligning backgrounds with border, padding, or content edges |
These panels use the same small background marker. Only the position value changes:
Use non-repeating backgrounds to make placement differences easy to see.
Try background-position with center, corner keywords, percentages, and a multi-value comparison.
Start with simple keyword positioning before moving to percentages and pixel offsets.
Place a background image in the center of an element.
.hero {
background-image: url("hero.jpg");
background-position: center;
background-size: cover;
}The keyword center places the background in the middle of the element both horizontally and vertically.
Use corner keywords to place a background marker in opposite corners.
.top-left { background-position: top left; }
.bottom-right { background-position: bottom right; }Two keyword values set horizontal and vertical placement. top left and bottom right are common corner positions.
Use relative and absolute values when you need more precise background placement.
Position a background relative to the size of the element using percentages.
.panel {
background-image: radial-gradient(circle, #059669 0 30px, transparent 31px);
background-repeat: no-repeat;
background-size: 80px 80px;
background-position: 75% 25%;
}The first value moves the background horizontally; the second moves it vertically, both relative to the element size.
See how different position values move the same background marker to different places.
.center { background-position: center; }
.top { background-position: top; }
.pixels { background-position: 20px 30px; }The same background settings can look very different depending on which position value you choose.
background-position WorksAdd an image or gradient with background-image.
Use keywords, percentages, or pixel values in background-position.
The background is placed relative to the background positioning area, which can be shaped by background-origin.
You can center hero images, place icons in corners, and fine-tune decorative backgrounds.
background-position is one of the most widely supported CSS properties and works reliably across modern and older browsers.
Chrome, Firefox, Safari, Edge, and Opera all support keyword, percentage, and length positioning values.
Invalid position values are ignored, leaving the previous or default top-left placement in effect.
Bottom line: Use background-position confidently in any web project.
The background-position property gives you precise control over where background images appear inside an element. Whether you center a hero photo or place a small decorative marker in a corner, this property makes background layout flexible and predictable.
Start with keywords like center and top left, then explore percentages and pixel offsets when you need finer control.
center for hero images with background-size: cover;background-repeat and background-sizebackground-origin when borders or padding matterbackground-position with background-originbackground-positionUse these points when placing backgrounds in your layouts.
Moves background images.
Purposecenter, top, bottom, left, right.
ValuesRelative positioning.
ResponsiveTop-left by default.
DefaultPlacement area matters.
CompareOpen the HTML editor, move background markers around, and experiment with background-position instantly.
5 people found this page helpful