CSS Tutorial

CSS Image Sprites

An image sprite is a single image file that packs many smaller images - typically icons - into one. Using background-position, CSS shows only the slice you want. This classic technique reduces the number of network requests a page makes, and it powers hover and active icon states without extra downloads.

What is an Image Sprite?

A sprite sheet is one image containing several icons arranged in a grid or a row. Instead of loading ten separate icon files, the browser downloads a single sprite once. Each element then displays a portion of that shared image by setting it as a background and shifting it with background-position so only the needed icon shows through a fixed-size window.

Why Use Sprites?

Every image on a page is a separate HTTP request, and requests have overhead. Combining twenty icons into one file means one request instead of twenty, which historically made pages load noticeably faster - especially over slow connections or older HTTP/1.1 servers.

Approach	Requests	Notes
10 separate icon files	10	More round trips, more overhead
1 sprite sheet	1	Single download, sliced with CSS

The Core Technique

Give the element a fixed width and height matching one icon, set the sprite as its background image, then use background-position to move the sheet so the correct icon lands inside that window. Negative offsets slide the image left and up.

Revealing one icon from a sprite

.icon {
  width: 32px;
  height: 32px;
  background: url("icons.png") no-repeat;
}
.icon-home { background-position: 0 0; }
.icon-user { background-position: -32px 0; } /* second icon */
.icon-gear { background-position: -64px 0; } /* third icon */

Live Sprite Simulation

Real sprites need an external image, which the live editor cannot download. This example simulates the idea with a large CSS gradient acting as the shared sheet - each window shows a different region by shifting background-position, exactly as a sprite works.

Example

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: system-ui, sans-serif; padding: 20px; }
  .sheet { width: 60px; height: 60px; display: inline-block; border: 2px solid #334155; border-radius: 8px; background-image: linear-gradient(90deg, #ef4444, #f59e0b, #10b981, #3b82f6, #8b5cf6); background-size: 300px 60px; background-repeat: no-repeat; }
  .s0 { background-position: 0 0; }
  .s1 { background-position: -60px 0; }
  .s2 { background-position: -120px 0; }
  .s3 { background-position: -180px 0; }
  .s4 { background-position: -240px 0; }
</style>
</head>
<body>
  <p>One 300px "sheet", five 60px windows:</p>
  <span class="sheet s0"></span>
  <span class="sheet s1"></span>
  <span class="sheet s2"></span>
  <span class="sheet s3"></span>
  <span class="sheet s4"></span>
</body>
</html>

Hover States from One Sprite

Sprites also store an icon's normal and hover versions side by side. On :hover you just shift background-position to the alternate copy - no second image loads, so the swap is instant and flicker-free.

Example

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: system-ui, sans-serif; padding: 20px; }
  .btn { width: 120px; height: 44px; border-radius: 8px; background-image: linear-gradient(#3b82f6 50%, #1d4ed8 50%); background-size: 120px 88px; background-position: 0 0; color: #fff; text-align: center; line-height: 44px; font-weight: bold; cursor: pointer; }
  .btn:hover { background-position: 0 -44px; }
</style>
</head>
<body>
  <div class="btn">Hover me</div>
  <p>The button shifts to the darker half of its sheet on hover.</p>
</body>
</html>

💡

Modern alternatives like SVG icon sets and inline SVG symbols often replace bitmap sprites today because they scale crisply and are easier to recolor with CSS. Sprites remain useful for fixed-size raster icons and legacy support.

⚠️

Keep the element's width and height exactly equal to one icon's size. If the window is larger than a single icon, neighboring icons will bleed into view.

Key points

A sprite combines many images into one file to cut HTTP requests.
Set the sprite as a background and use background-position to reveal one slice.
Match the element's width and height to a single icon's dimensions.
Negative background-position values slide the sheet left and up.
Swap background-position on :hover for instant, download-free hover icons.