Menu
Components & UI
CSS Image Sprites
Combine multiple images into one to reduce requests.
1Using Sprites
Shift background position to show part of an image.
Example Code
css
.icon {
width: 50px;
height: 50px;
background: url('sprite.png');
}
.icon-home { background-position: 0 0; }
.icon-user { background-position: -50px 0; }2Understand it in a real interface
A sprite combines several images into one source and displays a chosen region through background positioning. It can help a specific asset workflow, but an SVG icon system or individual optimized assets may be easier to maintain. The visible region depends on both its dimensions and the coordinate offset.
3Try it yourself
Draw or use a permitted two-icon sprite and display each region in a separate box. Change the box size and observe how unintended parts become visible. Keep the source coordinates documented, and provide accessible names on any controls that use the decorative regions.
Finished reading?
Mark this topic as complete to track progress.