CSS Image Sprites

Imagine packing a lunchbox for school. You could pack your sandwich in one box, your apple in a second box, your cookies in a third box, and your juice in a fourth box. That is a lot of separate containers to carry. Instead, you buy a Bento lunchbox that has small, divided sections to hold everything in one single container. A CSS image sprite is that Bento lunchbox. It combines multiple separate images (like icons or logos) into one single image file. By using background position coordinates, you instruct the browser to display only the specific section of the image you need, reducing network requests and speeding up your page load times.

In this page:

The Sprite Concept
Sizing and Position coordinates
Hover Effects with Sprites
Designing a Clean Sprite Sheet
Sprites vs. Modern Vector Fonts

Syntax

css

.sprite {
  width: length;
  height: length;
  background: url("sprite.png") no-repeat;
  background-position: -x -y;
}

The Sprite Concept

An image sprite is a single image file that contains multiple separate graphics. This technique optimizes web performance by reducing the number of server requests needed to load multiple assets on your page.

Note: Combine your website's social media and interface icons into one single sprite sheet to save server bandwidth.

Warning: Using sprites requires precise pixel coordinates; if your coordinates are slightly off, other icons will bleed into your display box.

Example: The Sprite Concept

css

<style>
.sprite-sheet {
  width: 96px;
  height: 32px;
  background-image: linear-gradient(90deg, #e53935 0 32px, #1e88e5 32px 64px, #43a047 64px 96px);
  margin-bottom: 8px;
}
.icon {
  width: 32px;
  height: 32px;
  background-image: linear-gradient(90deg, #e53935 0 32px, #1e88e5 32px 64px, #43a047 64px 96px);
  background-color: lightgray;
}
</style>
<p>One sprite sheet, 96&times;32px, holding 3 icons:</p>
<div class="sprite-sheet"></div>
<p>One window into it, showing only the first icon:</p>
<div class="icon"></div>

Sizing and Position coordinates

To display a specific icon, you define a fixed width and height on your display box, and use the background-position property to shift the sprite sheet coordinates so only your target icon aligns inside the box.

Note: Always write negative pixel coordinates (like background-position: -50px 0) to shift the background sheet to the left or top.

Warning: Any spelling errors in your coordinate values will cause the browser to display empty space or the wrong icon.

Example: Sizing and Position coordinates

css

<style>
.icon {
  width: 32px;
  height: 32px;
  background-image: linear-gradient(90deg, #e53935 0 32px, #1e88e5 32px 64px, #43a047 64px 96px);
  background-color: lightgray;
  background-position: -32px 0;
}
</style>
<div class="icon"></div>
<p>Shifted left by 32px, so the blue icon now shows through the same window.</p>

Hover Effects with Sprites

One of the best features of image sprites is that you can create instant, pre-loaded hover animations. By arranging your normal and hover icons next to each other on the same sheet, you can change the background-position on hover to display the highlighted state instantly.

Note: Using sprites for hover states eliminates the loading lag that happens when loading separate hover images.

Warning: Make sure your normal and hover states have identical dimensions on the sprite sheet to prevent alignment errors.

Example: Hover Effects with Sprites

css

<style>
.icon {
  width: 32px;
  height: 32px;
  background-image: linear-gradient(180deg, #e53935 0 32px, #43a047 32px 64px);
  background-color: lightgray;
  background-position: 0 0;
}
.icon:hover {
  background-position: 0 -32px;
}
</style>
<div class="icon"></div>
<p>Hover to instantly swap to the pre-loaded green icon stacked below it &mdash; no flicker, no second request.</p>

Designing a Clean Sprite Sheet

To keep your coordinates easy to calculate, you should arrange your icons on the sprite sheet in a clean, mathematical grid structure (like using consistent 32x32px or 50x50px bounding boxes).

Note: Use a grid structure on your sprite sheet to make writing coordinate values simple.

Warning: Uneven spacing on your sprite sheet will force you to use complex, decimal-based coordinates in your CSS.

Example: Designing a Clean Sprite Sheet

css

<style>
.icon {
  width: 32px;
  height: 32px;
  display: inline-block;
  background-image: linear-gradient(90deg, #e53935 0 32px, #1e88e5 32px 64px, #43a047 64px 96px, #fdd835 96px 128px);
  background-color: lightgray;
}
.p0 { background-position: 0 0; }
.p1 { background-position: -32px 0; }
.p2 { background-position: -64px 0; }
.p3 { background-position: -96px 0; }
</style>
<div class="icon p0"></div> <code>0 0</code>
<div class="icon p1"></div> <code>-32px 0</code>
<div class="icon p2"></div> <code>-64px 0</code>
<div class="icon p3"></div> <code>-96px 0</code>
<p>Every icon sits at a clean multiple of 32px, so the offsets are trivial to calculate.</p>

Sprites vs. Modern Vector Fonts

While image sprites were historically essential for optimizing site performance, modern websites often use vector icon fonts (like Font Awesome) or inline SVGs. Vector icons scale cleanly to any size, are highly editable with CSS, and do not pixelate like sprite sheets do.

Note: Use modern vector icons or inline SVGs for clean, scalable designs, and save sprites for legacy photographic alignments.

Warning: Sprite sheets are raster images, meaning they will look blurry and pixelated when zoomed on modern high-resolution displays.

Example: Sprites vs. Modern Vector Fonts

css

<style>
.icon-sprite {
  width: 32px;
  height: 32px;
  display: inline-block;
  vertical-align: middle;
  background-color: #fbc02d;
}
.icon-svg {
  width: 32px;
  height: 32px;
  vertical-align: middle;
  fill: #fbc02d;
}
</style>
<p>Sprite-based icon (fixed pixel size, needs a matching sheet):
  <span class="icon-sprite"></span>
</p>
<p>Modern alternative &mdash; an inline SVG icon (scales to any size, recolors with CSS, no sprite sheet needed):
  <svg class="icon-svg" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.77 5.82 21 7 14.14l-5-4.87 6.91-1.01z"/></svg>
</p>

Live Example

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Image Gallery Next Lesson → CSS Attribute Selectors