background-position aligns each image within its background positioning area. Background-origin normally selects that area. Percentage positions align the same percentage point of the image and area, rather than measuring a simple percentage offset from the left.
Center a smaller image
The 80px-wide image sits inside a 240px positioning area. At 50%, the horizontal offset is (240 − 80) × .5 = 80px. The image’s center meets the box’s center.
HTML and CSS
HTML
<div class="sample" aria-hidden="true"></div>
<p>A centered, smaller decorative image.</p>CSS
.sample {
width: 240px;
max-width: 100%;
height: 120px;
background-color: #eff6ff;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22300%22%20height%3D%22100%22%20viewBox%3D%220%200%20300%20100%22%3E%3Crect%20width%3D%22150%22%20height%3D%22100%22%20fill%3D%22%232563eb%22%2F%3E%3Crect%20x%3D%22150%22%20width%3D%22150%22%20height%3D%22100%22%20fill%3D%22%230f766e%22%2F%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2250%22%20r%3D%2224%22%20fill%3D%22white%22%2F%3E%3Ccircle%20cx%3D%22260%22%20cy%3D%2250%22%20r%3D%2224%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");
background-size: 80px auto;
background-repeat: no-repeat;
background-position: 50% 50%;
}Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.
Keep a decoration away from the edges
Four-value edge syntax offsets the tile from the right and bottom. The box can grow while the edge distance stays 12px.
HTML and CSS
HTML
<div class="sample" aria-hidden="true"></div>
<p>12px from the right and bottom edges.</p>CSS
.sample {
min-height: 140px;
background-color: #eff6ff;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22300%22%20height%3D%22100%22%20viewBox%3D%220%200%20300%20100%22%3E%3Crect%20width%3D%22150%22%20height%3D%22100%22%20fill%3D%22%232563eb%22%2F%3E%3Crect%20x%3D%22150%22%20width%3D%22150%22%20height%3D%22100%22%20fill%3D%22%230f766e%22%2F%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2250%22%20r%3D%2224%22%20fill%3D%22white%22%2F%3E%3Ccircle%20cx%3D%22260%22%20cy%3D%2250%22%20r%3D%2224%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");
background-size: 90px auto;
background-repeat: no-repeat;
background-position: right 12px bottom 12px;
}Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.
Values and defaults
The initial position is 0% 0% and the property is not inherited. Two lengths/percentages mean horizontal then vertical. One value leaves the other axis centered. Keywords identify edges or center; three/four-value forms attach offsets to preceding edge keywords. Multiple images use comma-separated positions.
For percentages, use (area size − rendered image size) × percentage. If image and area are equal in an axis, percentage changes have no effect there. If the image is larger, the remaining difference is negative, which determines cropping.
Common mistakes
An image filling both dimensions may show no difference between 0% and 100%. A background shorthand declared later can reset this position. Ensure the image exists and background-repeat is deliberate before diagnosing alignment.
Learn background-size, background-origin, and object-position.
Sources and browser support
MDN: background-position describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.