Open In App

What is CSS sprites and how to implement them on a page ?

Improve
Improve
Like Article
Like
Save
Share
Report

Let’s understand how to implement CSS image sprites on a page. CSS Image Sprites are the set of images combined in a single image. It is used to decrease the download burden of the site and save bandwidth.

So instead of downloading multiple images, we download a single image and use the different positions within the image for different purposes within the web page.

To create a sprite, we make use of CSS properties and set the combined image as the background of an element then we position it using the background-position property.

Let us understand this with two different examples:

Example 1: Let us use the GeeksforGeeks logo to understand sprites in this example.

GFG Logo

In the above image, we have Two G’s and to display a single G we select the image and add the part of this image as the background as shown in the below code snippet:

HTML




<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
  
<style>
    h1 {
        color: green;
    }
  
    img {
        width: 43px;
        height: 45px;
        background: url(
          0 0 no-repeat;
        background-position: -20px -20px;
    }
</style>
  
<body>
  
    <h1 style="color:green"> GeeksforGeeks</h1>
    <h3>Explain CSS sprites, and how you would 
        implement them on a page or site.</h3>
    <img src=
  
</body>
</html>


Output:

OUTPUT

Explanation: Steps followed in the above example:

  • Add image tag to the HTML body with no src attribute.
  • select the image in internal CSS and add the following properties:

img {
   width: 43px;
   height: 45px;
   background: url(“https://media.geeksforgeeks.org/wpcontent/uploads/20220830173608/Screenshot20220830173552.png”)
       0 0 no-repeat;
}

With this, we are able to display only the first G of the geeksforgeeks logo.

We can also use these as navigation icons by combining multiple icons as one image. Observe the below example

Example 2: The complete image looks like this:

Example image

Displaying the part of the image as a navigation icon. In the above picture, we have four direction icons combined in a grid of four parts. So instead of making use of four different images, we use the individual icons by referring to the part of the image.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Page Title</title>
</head>
<style>
    h1 {
        color: green;
    }
  
    img:nth-of-type(1) {
        width: 88px;
        height: 70px;
        background: url(
          0 0 no-repeat;
        background-size: 178px;
    }
  
    img:nth-of-type(2) {
        width: 89px;
        height: 70px;
        background: url(
          0 -78px no-repeat;
        background-size: 178px;
    }
  
    img:nth-of-type(3) {
        width: 89px;
        height: 70px;
        background: url(
          -87px 0 no-repeat;
        background-size: 178px;
    }
  
    img:nth-of-type(4) {
        width: 89px;
        height: 70px;
        background: url(
          -87px -78px no-repeat;
        background-size: 178px;
    }
  
    img:hover {
        cursor: wait;
    }
</style>
  
<body>
  
    <h1 style="color:green"
          GeeksforGeeks</h1>
    <h3>Explain CSS sprites, and how you would implement 
          them on a page or site.</h3>
    <img src=
    <img src=
    <img src=
    <img src=
  
</body>
  
</html>


Output:

 

Explanation: In the above example we are creating navigation arrows with a single image that shows waiting for the cursor on hover.

  • We are creating four instances of the same image
  • We are selecting the images with CSS pseudo-classes
  • Applying background properties with proper position


Last Updated : 06 Sep, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads