Advanced Search

Return to Snippet

Revision: 62996
at March 28, 2013 19:31 by codingforever99
Updated Code 
<style>
div.img1{
    width:32px;  /* width of selected icon */
    height:32px; /* height of selected icon */
    background:url(http://mysite/image.png) -130px -16px; /* the position of icon in the main image */
}

div.img2{
    width:29px;
    height:27px;
    background:url(http://mysite/image.png) -35px -2px;
}
</style>

<body>
    <div class="img1"></div>
    <div class="img2"></div>
</body>

Revision: 62995
at March 28, 2013 19:28 by codingforever99
Updated Code 
<style>
div.img1{
    width:32px;  /* width of selected icon */
    height:32px; /* height of selected icon */
    background:url(https://mysite/image.png) -130px -16px; /* the position of icon in the main image */
}

div.img2{
    width:29px;
    height:27px;
    background:url(https://mysite/image.png) -35px -2px;
}
</style>

<body>
    <div class="img1"></div>
    <div class="img2"></div>
</body>

Revision: 62994
at March 28, 2013 19:26 by codingforever99
Initial Code 
<style>
div.img1{
    width:32px;  /* width of selected icon */
    height:32px; /* height of selected icon */
    background:url(https://******/image.png) -130px -16px; /* the position of icon in the main image */
}

div.img2{
    width:29px;
    height:27px;
    background:url(https://******/image.png) -35px -2px;
}
</style>

<body>
    <div class="img1"></div>
    <div class="img2"></div>
</body>
Initial URL 
http://function-code.blogspot.com/2013/03/image-sprites-get-portion-of-image.html
Initial Description 
One of the great methods to load and work with icons in web pages is to load one image that is a collection of several icons and use any icon as needed, that reduces the number of server request and save bandwidth.
Initial Title 
Image Sprites - How to get portion of an image
Initial Tags 
css, html, images
Initial Language 
CSS