CSS Image Sprites

Introduction to CSS Image Sprites

Image sprites are a way to reduce the number of HTTP requests by combining multiple images into one file and displaying parts of it as needed.

Using Image Sprites

• Use the background-position property to display specific parts of the sprite image.
• Useful for icons or button images.

Example

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

Browser Support

Supported by all major browsers.