CSS background-position Explained for Sprite Sheets

CSS background-position for Sprites

The background-position property is the core mechanism that makes CSS sprites work. Understanding how it positions a background image within an element is essential for working with sprite sheets.

The Coordinate System

CSS background-position uses a coordinate system where:

• (0, 0) is the top-left corner of the element
• Positive X moves the image to the right
• Positive Y moves the image down
• Negative X moves the image to the left
• Negative Y moves the image up

For sprites, you almost always use negative values because you are shifting the large sprite sheet left and up to position the desired sprite within the element's visible area.

Pixel Offset Calculation

Given a sprite sheet with a uniform grid:

Column index: 0    1    2    3
              ├────├────├────├────┤
Row 0         │ A  │ B  │ C  │ D  │
              ├────├────├────├────┤
Row 1         │ E  │ F  │ G  │ H  │
              └────└────└────└────┘

Cell size: 48x48px, Padding: 2px

To display sprite G (column 2, row 1):

.sprite-G {
  width: 48px;
  height: 48px;
  background-position: -100px -50px;
  /* X: -(2 * (48 + 2)) = -100px */
  /* Y: -(1 * (48 + 2)) = -50px */
}

Formula

X offset = -(column * (spriteWidth + padding))
Y offset = -(row * (spriteHeight + padding))

Multiple Value Syntaxes

/* Two values: X Y */
background-position: -100px -50px;

/* Keywords */
background-position: left top;
background-position: center center;

/* Percentage (NOT useful for sprites — percentage-based positioning
   is relative to both element and image size) */
background-position: 50% 50%;

/* Four-value syntax (edge offsets) */
background-position: right 10px bottom 20px;

For sprite sheets, always use pixel values rather than percentages. Percentage-based positioning calculates differently and does not map to predictable grid offsets.

Shorthand Property

/* Longhand */
background-image: url('sprites.png');
background-position: -100px -50px;
background-repeat: no-repeat;

/* Shorthand */
background: url('sprites.png') -100px -50px no-repeat;

Debugging Tips

• Use browser DevTools to adjust background-position in real-time
• Add a temporary visible border to see the element boundaries
• Use the element inspector to verify the computed background-position
• Check that the element's width/height exactly matches the sprite dimensions