Responsive sprites / How to calculate percentage of position

[lostin]

I’ve been reading about responsive sprites for days now and I still do not understand how to calculate the background-position and background-size in percentages. Is there any formula for that? If I have a div that has width:20% and I want to use a background-image that is positioned at -139px -177px and the image is bigger than the container (the 20% div), how do I get the background-position in percentage and the background-size in percentage? Really, when is it worth to use sprites for responsive design? I am using bootstrap 3 and I make a lot of use of the grid system. Can I use sprites responsive as the columns? tks

[Paulie_D]

Really, when is it worth to use sprites for responsive design?

From some of the questions and answers I’ve seen here and on Stack Overflow…it doesn’t seem worth it in the long run.

It seems to take an awful lot of work to get right for something that, in the long run, wasn’t meant to be responsive anyway.

[lostin]

Thank you, guys. I’ll keep that in mind. And, for now, I gave up on trying to make sprites responsive. I don’t think it is worth the trouble.
Thanks again.

[chrisburton]

I don’t think I’ve made a sprite in over a year.

Same here. I started creating my own icons and converting them into font files (woff, ttf, svg). Much easier to maintain, scale, change colors, etc.

[erickb]

I do it with a sprites.svg file
if you have 20 icons –> background-size: CALC(20 * 100%); = 2000%

background-position:-200% 0;
background-position:-1200% 0;
……..

[Author]

Posts