Image sprites are a technique used in web development to combine multiple images into a single image file. This approach can help reduce the number of server requests and improve website performance.
Image sprites are commonly used for icons, buttons, and other small graphics on a website. CSS is then used to display specific parts of the sprite image as needed.
Here’s a step-by-step guide on how to create and use image sprites in CSS:
Step 1: Create The Sprite Image
- Create a single image file that contains all the individual images (icons, buttons, etc.) you want to use on your website. You can use software like Photoshop or a similar tool to arrange these images into a single image file.
- Save the sprite image in a suitable format like PNG or JPEG. Make sure the individual images within the sprite are well-organized with consistent spacing between them.
Step 2: Add HTML Markup
In your HTML document, you’ll need to add elements that will display the individual images from the sprite. Typically, you’ll use HTML elements like <div> or <span> for this purpose. Here’s an example:
<html><head><!-- CSS styling here --></head><body><div class="sprite-icon"></div></body></html>Step 3: Define CSS Classes
In your CSS file / style tag (inline styling), define classes for each element that uses the sprite image. You’ll set the background-image to your sprite image and specify the background-position to display the desired part of the sprite. Here’s an example:
.sprite-icon {
width: 32px; /* Set the width of the displayed image */
height: 32px; /* Set the height of the displayed image */
background-image: url('sprites.png'); /* Path to your sprite image */
background-position: -16px -16px; /* Position of the individual image within the sprite */
}
In the above example, the background-position property is used to specify which part of the sprite image to display. The values (-16px, -16px) represent the position of the desired image within the sprite. By adjusting these values, you can display different images from the sprite.
Step 4: Use The Sprites In HTML
You can now use the CSS classes you defined in your HTML elements to display the individual images from the sprite:
<div class="sprite-icon"></div>Repeat this process for each element that needs to display an image from the sprite.
CSS Image Sprites – Basic Example
The following example demonstrates how to use CSS image sprites to display multiple images from a single image file.
<html><head><style>
.orignal-img {
width: 300px;
height: 100px;
}
ul {
list-style: none;
padding: 0;
}
li {
height: 150px;
display: block;
}
li a {
display: block;
height: 100%;
}
.bootstrap, .html, .css {
width: 150px;
height: 150px;
background-image: url('images/devices.png');
background-repeat: no-repeat;
}
.bootstrap {
background-position: -5px -5px;
}
.html {
background-position: -155px -5px;
}
.css {
background-position: -277px -5px;
}
</style></head><body><h3>Orignal Image</h3><img class="orignal-img" src="images/devices.png"/><h3>After implementing CSS image sprites</h3><ul class="navbar"><li><a href="#" class="bootstrap"></a></li><li><a href="#" class="html"></a></li><li><a href="#" class="css"></a></li></ul></body></html>CSS Image Sprites – Hover Effect
The following example demostartes how to use image sprites to create a hover effect where the images become slightly transparent when you hover over them −
<html><head><style>
.orignal-img {
width: 300px;
height: 100px;
}
ul {
list-style: none;
padding: 0;
}
li {
height: 150px;
display: block;
}
li a {
display: block;
height: 100%;
}
.bootstrap, .html, .css {
width: 150px;
height: 150px;
background-image: url('images/devices.png');
background-repeat: no-repeat;
}
.bootstrap {
background-position: -5px -5px;
}
.html {
background-position: -155px -5px;
}
.css {
background-position: -277px -5px;
}
.bootstrap:hover, .html:hover, .css:hover {
opacity: 0.7;
}
</style></head><body><h3>Orignal Image</h3><img class="orignal-img" src="images/devices.png"/><h3>After implementing CSS image sprites</h3><ul class="navbar"><li><a href="#" class="bootstrap"></a></li><li><a href="#" class="html"></a></li><li><a href="#" class="css"></a></li></ul></body></html>
Leave a Reply