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

.icon {
  width: 50px;
  height: 50px;
  background: url('sprite.png');
}
.icon-home { background-position: 0 0; }
.icon-user { background-position: -50px 0; }

Finished reading?

Mark this topic as complete to track progress.

CSS Image Gallery

Next Topic

CSS Forms