How to create and use CSS Image Sprites ?

Last Updated : 25 Jul, 2024

In this article, we are going to learn how we can how to create and use CSS Image Sprites.

CSS Image Sprites are nothing but a way to reduce the HTTP requests from the image resources. A CSS Image Sprite is a single image file containing all images on a document page. Image sprites are advantageous since image resources will only have to be loaded once.

Approach: At first we need to create an image that will have all the images we want to combine into one using any image editor. At first, we need to add all the divs or anchor tags, the number of them will be the same as the number of images in that sprite(generally). Then in the style part, we need to specify the background-position of the divs or anchor tags with the width or height of the images in the sprite. In this article, we have made a navbar using the image sprite below.

Properties used:

background: It is a property that is used to add a background to any element, it can be a simple color or it can even be an image.
background-position: This specifies the initial image position of the background image.
position: This property specifies the type of positioning an element will have. It takes values such as static, relative, absolute, fixed, or sticky.
display: This property defines how the element will be shown on the webpage.
left: This class is used to position elements horizontally, this class only works on an element whose position is set to some value.
width: This class is used to specify the total width of an element.

Example 1: The below example shows how we can use a combined image as an image sprite and make the webpage more efficient by reducing the HTTP requests for separate images.

HTML

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        .sprite {
           background: url("sprite.png") no-repeat;
           width: 280px;
           height: 200px;
           display: inline-block;
        }
        .logo1 {
            left: 0px;
            width: 100px;
            background-position: 0px 0px;
        }
        .logo2 {
            left: 100px;
            width: 111px;
            background-position: -100px 0px;
        }
        .logo3 {
            left: 200px;
            width: 100px;
            background-position: -211px 0px;
        }
        .logo4 {
            left: 300px;
            width: 100px;
            background-position: -311px 0px;
        }
        body {
           text-align: center;
        }
        h1{
            color: green;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>GeeksForGeeks</h1>
    <div><h2>How to create and use CSS Image Sprites ?</h2></div>
    <div class="sprite logo1"></div>
    <div class="sprite logo2"></div>
    <div class="sprite logo3"></div>
    <div class="sprite logo4"></div>

</body>
</html>

Output:

Example 2: Here you can see how we can add separate anchor tags/links to the separate images in the image sprite.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        #navlist {
            position: relative;
        }

        #navlist li {
            margin: 0;
            padding: 0;
            list-style: none;
            position: absolute;
            top: 0;
        }

        #navlist li, #navlist a {
            height: 100px;
            display: block;
        }

        #home {
            left: 0px;
            width: 100px;
            background: url('text.gif');
            background-position: 0 0;
        }

        #prev {
            left: 100px;
            width: 200px;
            background: url('text.gif');
            background-position: -100px 0;
        }
        
        #next {
            left: 200px;
            width: 100px;
            background: url('text.gif');
            background-position: -200px 0;
        }
        h1{
            color: green;
        }
    </style>
</head>
<body>
    <h1>GeeksForGeeks</h1>
    <div><h2>How to create and use CSS Image Sprites ?</h2></div>
    <ul id="navlist">
    <li id="home"><a href=
  "https://www.geeksforgeeks.org"></a></li>
    <li id="prev"><a href=
    "https://www.geeksforgeeks.org/data-structures/">
      </a></li>
    <li id="next"><a href=
 "https://www.geeksforgeeks.org/fundamentals-of-algorithms/">
      </a></li>
    </ul>
</body>
</html>

Output:

How to create Image Stack Illusion using HTML and CSS ?

priyanshuchatterjee01

Improve

Article Tags :

How to create and use CSS Image Sprites ?

Properties used:

Similar Reads

Thank You!

What kind of Experience do you want to share?