Background
background-position
background-position sets where a background image sits. Write the horizontal then the vertical position with keywords, lengths or percentages.
Syntax
<bg-position>#
<bg-position> = <position>Preview
Presets
Drag the bottom-right corner to resize
Code
.box {
background-image: url(/sample.svg);
background-repeat: no-repeat;
background-position: 25% 75%;
}Controls
Click or drag inside the box to move the center
Horizontal
Vertical
About
Percentages line up matching points
A percentage means put the point X% across the image on the point X% across the area. 0% lines up the left edges and 100% the right edges, so the image never overflows; 50% is dead center. A length such as 20px offsets the image’s top-left corner from the area’s top-left corner.
Ways to write it
- With one value, the other becomes
center.topalone means top center. - Keywords can go in either order (
top rightequalsright top). - Follow a keyword with a length, as in
right 20px bottom 10px, to measure from that edge. The controls here don’t cover it, but you can type it into the code.
Watch out
The initial value is 0% 0% (top left). When the image repeats, this position anchors the tiling. The preview here lays a sample image with repetition turned off.