CSS Image Sprites - Detailed Overview

Introduction to CSS Image Sprites

Image sprites are a method of optimizing web page performance by combining multiple images into a single image file. CSS is then used to display only the portion of the sprite image that is needed for each element. This reduces the number of HTTP requests and improves load times.

Example of CSS Image Sprites

In this example, we use a single sprite image that contains four icons. Each icon is positioned using the background-position property in CSS.

.sprite {
    display: inline-block;
    width: 64px; /* Width of each icon */
    height: 64px; /* Height of each icon */
    background-image: url('https://www.shariqsp.com/image1.jpg');
    background-repeat: no-repeat;
    background-size: 256px 64px; /* Width x Height of the sprite image */
}

.icon-home {
    background-position: 0 0; /* Position of the home icon in the sprite */
}

.icon-search {
    background-position: -64px 0; /* Position of the search icon in the sprite */
}

.icon-settings {
    background-position: -128px 0; /* Position of the settings icon in the sprite */
}

.icon-profile {
    background-position: -192px 0; /* Position of the profile icon in the sprite */
}