Responsive Sprite Sheets with Percentage-Based Sizing

Responsive Sprite Sheets

Responsive design requires elements that scale with the viewport. While standard sprite CSS uses fixed pixel values, responsive sprites adapt to different screen sizes using percentage-based techniques.

The Challenge

Fixed-pixel sprites have a problem in responsive layouts:

/* This won't scale with the container */
.icon {
  width: 32px;
  height: 32px;
  background-position: -64px -32px;
}

If the container shrinks on mobile, the icon remains 32x32px and may overflow or look disproportionate.

Percentage-Based background-position

When using background-size, background-position can use percentages that reference the sprite sheet grid rather than pixel offsets:

For a 4-column, 2-row sprite sheet with uniform cells:

.responsive-sprite {
  width: 100%;
  padding-bottom: 100%; /* Maintain aspect ratio */
  background-image: url('sprites.png');
  background-size: 400% 200%;
}

/* Position sprite at column 2, row 1 (0-indexed) */
.sprite-item {
  background-position: 66.667% 100%;
}

Percentage Formula

background-size: (columns * 100)% (rows * 100)%

X position: (column / (columns - 1)) * 100%
Y position: (row / (rows - 1)) * 100%

For a 4x3 grid, sprite at column 2, row 1:

• background-size: 400% 300%
• X: (2 / 3) * 100 = 66.667%
• Y: (1 / 2) * 100 = 50%

Using calc() for Fluid Sizing

.fluid-icon {
  width: calc(2rem + 1vw);
  height: calc(2rem + 1vw);
  background: url('sprites.png') no-repeat;
  background-size: calc((2rem + 1vw) * 8) calc((2rem + 1vw) * 4);
  background-position: calc(-1 * (2rem + 1vw) * 3) calc(-1 * (2rem + 1vw) * 1);
}

Container Query Approach

With modern CSS Container Queries:

.icon-container {
  container-type: inline-size;
}

@container (min-width: 600px) {
  .sprite-icon {
    width: 48px;
    height: 48px;
    background-size: 384px 192px;
  }
}

@container (max-width: 599px) {
  .sprite-icon {
    width: 24px;
    height: 24px;
    background-size: 192px 96px;
  }
}

Limitations

• Percentage-based positioning only works correctly when all sprites have uniform dimensions
• Mixed-size sprites require pixel-based positioning
• Subpixel rendering can cause slight blurriness at certain sizes
• Consider using SVG sprites for truly resolution-independent icons