By CSS-Tricks
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae esultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae esultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
<img src="images/arrow-sprite.png" alt="arrow" class="clip pos-1" />
.clip { position: absolute; top: 0; left: 0; } .pos-1 { clip:rect(0 48px 48px 0); } .pos-2 { clip:rect(0 96px 48px 48px); left: -48px; } .pos-3 { clip:rect(48px 48px 96px 0); top: -48px; } .pos-4 { clip:rect(48px 96px 96px 48px); top: -48px; left: -48px; }
<div class="clipwrapper"> <img src="images/arrow-sprite.png" alt="arrow" class="clip pos-1" /> </div>
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.
.clipwrapper { position: relative; height: 48px; width: 48px; }
Everything I tried it in, including IE 6, 7, 8 and all the regular good browsers.