Stretchy Sprites

Cross-browser, responsive resizing/stretching of CSS sprite images

This method does not rely on background-size, so it will work in older browsers.

Try <<< resizing >>> your browser window to see the sprites resize.
Read the notes and view source to see how it works.

Here's the single image that this demo uses (note: a spacer image is also required):


Demo (resize your browser window):

icon

Example Sprite 1
.sprite{left:0;}

icon

Example Sprite 2
.sprite.s2{left:-100%;}

.no-limit class allows stretching over natural size

icon

Example Sprite 3
.sprite.s3{left:-200%;}

icon

Example Sprite 4
.sprite.s4{left:-300%;}

icon

Example Sprite 5
.sprite.s5{left:-400%;}

icon

Example Sprite 6
.sprite.s6{left:-500%;}

.no-limit class allows stretching over natural size

Notes

Copyright © 2012 tobyj.net All rights reserved.