How To Create Image Sprites Using CSS With Examples

admin_img Posted By Bajarangi soft , Posted On 05-11-2020

In CSS An image sprite is a collection of images put into a single image.So today we discuss how about it.

How To Create Image Sprites Using CSS With Examples

Complete Code For Creating Image Sprites Using CSS.
Create Index.html and implement below code in it.

<!DOCTYPE html>
<html>
<head>
    <title>How To Create Image Sprites Using CSS With Examples</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
    body {
        background: #c7254e;
    }
    #navlist {
        position: relative;
    }

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

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

    #home {
        left: 0px;
        width: 46px;
        background: url('../image/home-network.png') 0 0;
        background-repeat: no-repeat;
        background-size: 30px 30px;
    }

    #contact {
        left: 63px;
        width: 43px;
        background: url('../image/contact.png') 0 0;
        background-repeat: no-repeat;
        background-size: 30px 30px;
    }

    #blog {
        left: 129px;
        width: 43px;
        background: url('../image/blog.png') 0 0;
        background-repeat: no-repeat;
        background-size: 30px 30px;
    }

    #home a:hover {
        background: url('../image/home-network.png') 0 0;
        background-repeat: no-repeat;
        background-size: 30px 30px;
    }

    #contact a:hover {
        background: url('../image/contact.png') 0 0;
        background-repeat: no-repeat;
        background-size: 30px 30px;
    }

    #blog a:hover {
        background: url('../image/blog.png') 0 0;
        background-repeat: no-repeat;
        background-size: 30px 30px;
    }
    .div1{
        background: lightcyan;
        height: 80px;
        padding: 20px;
        width: 100%;
    }
</style>
<body>
<br/><br/>
<div class="container">
    <br>
    <div class="text-center">
        <h1 id="color" style="color: white;">Create Image Sprites Using CSS</h1>
    </div>
    <br>
    <div class="well">
        <div class="div1">
            <ul id="navlist">
                <li id="home"><a href="default.asp"></a></li>
                <li id="blog"><a href="css_intro.asp"></a></li>
                <li id="contact"><a href="css_syntax.asp"></a></li>
            </ul>
        </div>
    </div>
    <br>
</div>
</body>
</html>

Related Post