CSS Image Sprites

CSS Image Sprites combine multiple images into a single image file. By using CSS background properties, you can display only the part of the image you need. This technique helps reduce the number of HTTP requests and can improve page load times.

Creating Image Sprites

To create an image sprite, you first combine multiple images into a single image file. Then, use CSS to display specific parts of the sprite.

Example: Simple Image Sprite

Below is an example of how to use a CSS image sprite:

/* Sprite Container */
.sprite {
    width: 50px; /* Width of the individual sprite */
    height: 50px; /* Height of the individual sprite */
    background-image: url('sprite.png'); /* Path to the sprite image */
    background-repeat: no-repeat;
}

/* Specific Sprites */
.icon1 {
    background-position: 0 0; /* Position of the first sprite */
}

.icon2 {
    background-position: -50px 0; /* Position of the second sprite */
}

.icon3 {
    background-position: -100px 0; /* Position of the third sprite */
}