responsive sprites / percentages

Question

I\'ve read every single question about responsive sprites using css, I saw jsfiddle with working examples of responsive sprites, but I still cannot understand how to get the

Answer 1

This is the best responsive example I have found to solve the problem of sprite!

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

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

Stretchy Sprites

• This example uses an image that is 800 wide x 160 high. This image contains 6 equal size sprites (160x160 each).

• If your sprite size is different all you need to change is the max-width property of .sprite to match the individual sprite width.

• To set the visible sprite: Set the left value of .sprite to: 0 = 1st sprite -100% = 2nd sprite -200% = 3rd sprite etc... Easy!

• If you want images to stretch larger than their natural size: Add the class .no-limit to .stretchy. This removes max-width:160px from .stretchy and add min-height:100% to .sprite Alternatively you could set a larger max-width using a px value, e.g. 300px.

• The spacer image can be any size, as long as it is propotional to the dimensions of the individual sprites.