The background-position CSS property sets the initial position for each background image. The position is relative to the positioning layer set by background-origin.

Coordinate System

The first value represents the horizontal position (x-axis), and the second value represents the vertical position (y-axis). If only one value is specified, the second value defaults to center.

Values and Units

• Keywords: top, bottom, left, right, center.
• Percentages: 0% to 100%. aligns the percent point of the image to the percent point of the container.
• Lengths: px, em, rem, etc. Exact offsets from the top-left corner.

The Percentage Quirk

Unlike other CSS properties where percentage refers strictly to the container size, background-position: 50% 50% means "Align the center (50%) of the image with the center (50%) of the container".

Best Practices

Use keywords for standard alignments like centering. Use percentages for fluid layouts where the relationship between image and container matters. Use pixels for precise, fixed designs.