Tutorialspoint.dev

CSS | Image Sprites

It is basically an image which is a collection of different images put together to form a single image. The use of image sprites is done for two main reasons:

  • For faster page loading since use only single image.
  • It reduce the bandwidth used to load multiple images. This way less data is consume.

Image sprites are generally used for designing a graphic social media bar or a navigation bar to make it more attractive and efficient at the same time. It is just a method in HTML and CSS to implement more efficient way of putting images and designing web pages.

Used Image:
icon image

Example:

<!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;
            }           
            .gfg {
                width: 100px;
                left:0px;
                background: url(
            }
            .gfg1 {
                width: 100px; 
                left:120px;
                background: url(
            }
            .gfg2 {
                width: 100px; 
                left:240px;
                background: url(
            
        </style>
    </head>
    <body>
        <ul id="navlist">
            <li class = "gfg"><a href="#"></a></li>
            <li class = "gfg1"><a href="#"></a></li>
            <li class = "gfg2"><a href="#"></a></li>
        </ul>
    </body>
</html>                                    

Output:
sprite image



This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter