Categories
CSS image sprites are a technique used to combine multiple small images into a single larger image, known as a sprite sheet. The purpose of using image sprites is to reduce the number of HTTP requests made to the server, thereby improving page loading times and overall performance. Instead of loading multiple small images individually, the entire sprite sheet is loaded once, and then portions of the sprite sheet are displayed as needed using CSS background positioning.
To use image sprites, you need to define a CSS class for each individual image within the sprite sheet. The background image of the container element is set to the sprite sheet, and the background position is adjusted to display the desired part of the sprite.
Here's a step-by-step guide with multiple examples to illustrate CSS image sprites:
- Basic Image Sprite:
<!DOCTYPE html>
<html>
<head>
<title>Basic Image Sprite Example</title>
<style>
/* Define the sprite sheet as the background image */
.sprite {
background-image: url("spritesheet.png");
width: 100px; /* Width of individual image within the sprite */
height: 100px; /* Height of individual image within the sprite */
}
/* Background position to show the first image */
.image1 {
background-position: 0 0;
}
/* Background position to show the second image */
.image2 {
background-position: -100px 0;
}
</style>
</head>
<body>
<div class="sprite image1"></div>
<div class="sprite image2"></div>
</body>
</html>
In this example, we have a sprite sheet that contains two images side by side, each with a size of 100x100 pixels. We define a class .sprite that sets the sprite sheet as the background image and specifies the width and height of each individual image within the sprite. Then, we create two more classes, .image1 and .image2, to specify the background positions to display the first and second images, respectively. By applying these classes to div elements, we can display different parts of the sprite sheet as separate images.
2. CSS Image Sprite for Icons:
<!DOCTYPE html>
<html>
<head>
<title>Icon Image Sprite Example</title>
<style>
/* Define the icon sprite sheet as the background image */
.icon {
background-image: url("icons.png");
width: 32px; /* Width of individual icon within the sprite */
height: 32px; /* Height of individual icon within the sprite */
display: inline-block;
}
/* Background position to show the home icon */
.home {
background-position: 0 0;
}
/* Background position to show the search icon */
.search {
background-position: -32px 0;
}
/* Background position to show the settings icon */
.settings {
background-position: -64px 0;
}
</style>
</head>
<body>
<div class="icon home"></div>
<div class="icon search"></div>
<div class="icon settings"></div>
</body>
</html>
In this example, we create a CSS image sprite for icons. The sprite sheet contains three icons, each with a size of 32x32 pixels. We define a class .icon to set the sprite sheet as the background image and specify the width and height of each icon within the sprite. Then, we create three more classes, .home, .search, and .settings, to specify the background positions to display the respective icons. By applying these classes to div elements, we can display the icons as individual inline-block elements.
These examples demonstrate how CSS image sprites can be used to efficiently display multiple images by using a single sprite sheet. By reducing the number of HTTP requests, image sprites contribute to improved website performance and a better user experience.