Backgroundposition

Background-position is a CSS property that specifies where to place a background image within an element. It controls the starting point of the background relative to the element’s box, influencing how the image is anchored and displayed as the element scales.

The property accepts two-value syntax for horizontal and vertical positioning. Each value can be a keyword (left, center, right for horizontal; top, center, bottom for vertical), a length (px, em, etc.), or a percentage. Examples: center center, left top, 20px 30px, 50% 50%. If only one value is provided, it applies to the horizontal position and the vertical position defaults to center. You can also specify two values where one is a keyword and the other is a length or percentage (e.g., right 10px, top 25%).

Background-position also supports multiple backgrounds, using comma-separated lists. Each pair (or single value followed by its implied center) applies to the corresponding background layer.

The initial value for background-position is left top (which corresponds to 0% 0%). It is commonly used alongside related background properties such as background-repeat, background-size, background-clip, background-origin, and background-attachment.

Practical notes: percentage values relate to the element’s dimensions, while length values are absolute offsets from the respective edge. The property enables precise alignment of a background image regardless of the element’s size, and it interacts with scaling and cropping when background-size is applied. Browser support is broad across modern engines.