CSS - Image Sprites

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>
Advertisements