CSS-Tricks Example

CSS Sprites with Inline Images

By CSS-Tricks

Below is one single inline image (of four arrows arranged in a square):

arrow

It is possible to use only parts of that image selectively.

arrow

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.

arrow

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.

How it's done

Generically

<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; }

Within flow

<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; }

Points to remember

Works in

Everything I tried it in, including IE 6, 7, 8 and all the regular good browsers.