Advanced Search

Sprite with Inline Images

/ Published in: CSS
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. // Generically
  2.  
  3. <img src="images/arrow-sprite.png" alt="arrow" class="clip pos-1" />
  4.  
  5. .clip               { position: absolute; top: 0; left: 0; }
  6.  
  7. .pos-1              { clip:rect(0 48px 48px 0); }
  8. .pos-2              { clip:rect(0 96px 48px 48px); left: -48px; }
  9. .pos-3              { clip:rect(48px 48px 96px 0); top: -48px; }
  10. .pos-4              { clip:rect(48px 96px 96px 48px); top: -48px; left: -48px; }
  11.  
  12.  
  13. // Within Flow
  14. // Use the same CSS as above, only wrap the image in a div with relative positioning and a matching height and width to the area you want to show.
  15.  
  16. <div class="clipwrapper">
  17.    <img src="images/arrow-sprite.png" alt="arrow" class="clip pos-1" />
  18. </div>
  19.  
  20. .clipwrapper        { position: relative; height: 48px; width: 48px; }
  21.  
  22.  
  23. /*
  24. Points to remember
  25.  
  26. * The element needs to be absolutely positioned.
  27. * To use it on an element and keep document flow, using a wrapping div with a relative position.
  28. * The clipped away areas are transparent but still occupy space.
  29. * For sprites other than the top/left sprite, you'll need to nudge the position back the same top/left distance you clipped away. 
  30. */

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.