ARTICLE

154 682

CSS Image Sprites

Posted by Gurjeet Singh in Articles | JavaScript, CSS on July 22, 2011

Tags: CSS, css image sprites, image sprites, sprites image

Image sprites is a collection of other small images

Tweet
11269
0

Reader Level: Beginner

Download Files:

Image Sprites.zip

Using image sprites you can divide the portion of one image into other small images. Every single image works standalone. In simple terms, you can say one image is a collection of other small images.
The main benefit of using image sprites is that it reduces the HTTP request and size of image (see the following figures).
If your web page has many images then it will take more time to load your web page on the server and also generate multiple HTTP requests. But when image sprites are used it take less time to load page as well as take less time to generate HTTP server requests.

Code:

HTMLPage.htm

<!DOCTYPE html>
<html>
<head>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    <title></title>
</head>
<body>
    <div class="firstmain">
        <ul id="FirstUL">
            <li id="first"><a href="white.htm"></a></li>
            <li>
                <div id="second">
                    <a href="blue.htm"></a>
                </div>
            </li>

        </ul>
        <ul id="SecondUL">
        <li id="third"><a href="red.htm"></a></li>
        <li id="forth"><a href=yellow.htm></a></li>
        </ul>
    </div>
     <div class="secondmain" >
        <a class="fifth" href="green.htm"></a>
    </div>
</body>
</html>
StyleSheet.css

#FirstUL
{
    margin: 0;
    padding: 0;
    width: 450px;
    float: left;
    height: 160px;
}
#FirstUL ul
{
    list-style: none;
    margin: 0;
    padding: 0;
}
#FirstUL li
{
    padding: 0;
    margin: 0;
    float: left;
    list-style: none;
    top: 0;
    list-style: none;
}
#FirstUL a
{
    height: 157px;
    width: 157;
    display: block;
}
#first
{
    background-image: url('image/all balls.jpg');
    background-position: 0 0;
    background-repeat: no-repeat;
    width: 157px;
    height: 157px;
}
#second
{
    margin-left: 29px;
    background-image: url('image/all balls.jpg');
    background-position: -184px 0;
    background-repeat: no-repeat;
    width: 157px;
    height: 157px;
}
#SecondUL
{
    margin: 0;
    padding: 0;
    width: 850px;
    float: left;
    margin-top: 154px;
    margin-left: -420px;
    height: 157px;
}
#SecondUL ul
{
    list-style: none;
    margin: 0;
    padding: 0;
}
#SecondUL li
{
    padding: 0;
    margin-right: 100PX;
    height: 160PX;
    float: left;
    list-style: none;
    top: 0;
    list-style: none;
}
#SecondUL a
{
    height: 157px;
    width: 157px;
    display: block;
}
#third
{
    margin-left: 29px;
    margin-top: 20PX;
    background-image: url('image/all%20balls.jpg');
    background-position: -9px -174px;
    background-repeat: no-repeat;
    width: 157px;
    height: 157px;
}
#forth
{
    background-image: url('image/all balls.jpg');
    background-position: -293px -152px;
    background-repeat: no-repeat;
    width: 157px;
    height: 157px;
}
.firstmain
{
    margin: 0px;
    padding: 0px;
    height: 330px;
    width: 900px;
}
.fifth
{
    background-image: url('image/all%20balls.jpg');
    background-position: -164px -290px;
    background-repeat: no-repeat;
    padding: 0px;
    width: 157px;
    height: 157px;
}
.secondmain
{
    margin-left: 200px;
    margin-top: -27px;
    width: 157px;
    height: 157px;
}
.secondmain a
{
    margin: 0px;
    padding: 0px;
    height: 157px;
    width: 157;
    display: block;
}

Output

Internet Explorer

image sprites

Chrome

image sprites

Fire Fox

Safari

image sprites

When you click on the red ball you will be navigated to the Red.htm page.

Output

image sprites

This Feature is Sponsored By

.NET Charting component with full set of charting and gauge types

comments

COMMENT USING

PREMIUM SPONSORS

DynamicPDF Developer Components

DynamicPDF™ product line allows you to dynamically generate PDF documents, merge PDF documents and add new content to existing PDF documents from within your applications.

TRENDING UP

Simple Tooltip Using HTML and CSS Kolkata Chapter Developer Day Official Recap Object Oriented Programming Using C#: Part 9 JsAction with T4 Template Logging Using Log4net in Compact Framework 2.0 in Visual Studio 2008 Learn OOP Interface Using C# S.O.L.I.D Principle Inversion of Control and Resolution With Dependency Injection How To Find A Doctor Near Your Home in SQL Server Creating Simple MVVM Application With Data Binding How to Add an Alias (CNAME) Resource Record to a Zone

View All

MOST LIKED ARTICLE

WCF Introduction and Contracts - Day 1 Create SSRS Report Using Report Wizard CREATE READ UPDATE and DELETE - CRUD Operation Using LINQ to SQL WCF - Data Contract - Day 4 Factory Design Pattern

Follow @twitterapi

Options	Votes	%
Very Fast	5	8.33
OK	47	78.33
Slow	5	8.33
Very Slow	3	5.00
Total	60	100%

In Focus

CSS Image Sprites

Related Articles


Speed of C# Corner

How do you find speed of C# Corner when visiting the site?

Very Fast OK Slow Very Slow