Posted By

codingforever99 on 03/28/13


Tagged

css html images


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

Mench59
Priestd09
Beppoi


Image Sprites - How to get portion of an image


 / Published in: CSS
 

URL: http://function-code.blogspot.com/2013/03/image-sprites-get-portion-of-image.html

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.

  1. <style>
  2. div.img1{
  3. width:32px; /* width of selected icon */
  4. height:32px; /* height of selected icon */
  5. background:url(http://mysite/image.png) -130px -16px; /* the position of icon in the main image */
  6. }
  7.  
  8. div.img2{
  9. width:29px;
  10. height:27px;
  11. background:url(http://mysite/image.png) -35px -2px;
  12. }
  13. </style>
  14.  
  15. <body>
  16. <div class="img1"></div>
  17. <div class="img2"></div>
  18. </body>

Report this snippet  

You need to login to post a comment.