[Solved] Responsive Sprites using Compass/SASS?
# January 19, 2013 at 10:30 am
Hi, I’ve just begun to use SASS/Compass and find it incredible, especially the way it makes using sprites so incredibly easy! BUT, I’m trying to design a responsive site and I can’t seem to figure out how to get the sprites to be responsive. The way I understand one can make an image responsive is by placing an img inside a container element and setting the img to max-width: 100%. So like this:
With sprites, the img is set as a background to the div, and there seems to be now way to adjust the background img dynamically to the div’s size. Or I haven’t been able to get this working. Does anyone know a good solution to this? I’ve looked through the web a bit and can’t seem to find anything, which also seems strange given the popularity of about SASS/Compass and responsive design solutions… But maybe I’m missing something really obvious here! I hope so.
Thanks!# January 19, 2013 at 4:12 pm
Well, @instantMash, I’d thought of that. The problem here seems partly to be that the size of the element to which the sprite image is assigned as a background does not and cannot adjust to the size of the background image. This is fine in terms of the width of the element, which will be set anyway with a percentage, but it is a problem when it comes to the height. In the conventional method for doing responsive images that I described, the containing div will stretch the height automatically to the size of the image. But the element with a background image/sprite will not adjust its height in the same way. Or at least that is how it seems to me at the moment…# February 13, 2013 at 6:59 pm
I’ve been looking for a solution to this all day, I agree its strange that there isn’t a lot of information out there. Here are a couple of links I’ve found today that have helped me.
I’ve managed to get my sprite responsive using an SVG file using the method used in that second URL. I’ll post a more detailed reply tomorrow. You can see where I am so far here: http://www.elliotscott.co.uk/temp/svg/
I’m sure there must be a way of doing this using background images with css and background-size/background-position but I have no idea how!# May 14, 2013 at 10:17 am
I’ve been struggling with this as well.
It seems that SVGs are the real solution, but when you throw in a SASS/Compass solution, nothing really makes sense in that toolset. All of the functions generate static pixel values which just flat out will not work with a responsive site – if you need the sprite to be responsive.# May 15, 2013 at 5:06 am
> But the element with a background image/sprite will not adjust its height in the same way.
If the div is otherwise empty (only used for the sprite, with possible compatibility text hidden), you can use something like
To get a perfect responsive square, this is because padding top and bottom in percentages are based on the width of the parent :)
Then you can use `background-size` and `background-position` to make your sprite responsive. If you want a demo, you can look here: http://codepen.io/CrocoDillon/pen/ekuxb and inspect the `#stage` div, there is a div inside that stage which animates using this technique (responsive sprite animation). The JS might be too much to read trough but using inspect you can see how it’s done :)# July 30, 2013 at 5:01 pm
Hi, sorry to wake up this thread again… but this is a hard decision to take…
Shall we stop using sprites.
we normally use Comapss Spirtes but there is no good practice to make work background-size with this method.
I start using this kind of fucntions:
But the the time it take to compile every time you save is reducing our productivity .
I really giving up on sprites…
somebody have a better idea??
thanks# March 24, 2014 at 11:42 pm
Guys, I had the same issue a couple of days ago! Got me mad, until I fixed it. So I know what you guys went through ;)
Here are three links that you can check to see how to make sprites responsive.
Simply a matter of CSS and grasping the fundamentals of it.# February 6, 2015 at 2:15 pm
well, I did spend a lot of time looking for an answer on this matter, I came out with this solution, it works for me at least for now, is based on fixed pixel box-sizing, and horizontal sprites, will be a mess with percentage anyway cuz you will have to do the math for the pixel values for that percentage, and for random located sprites cuz you will have to find the ‘random’ location of the sprite inside the image, too much math for a simple task I believe.
*Know the image width (compass image-width($image))
*the original pixel size and location of the sprite inside the image (Photoshop does the trick)
*The size of the containing box proportional to the corresponding sprite you are intended to show
*and of course the amount of stretch you want to apply to the specific sprite.
As a piece of advice, you will have to leave at least 1px of physical margin between each image cuz percentages produce not integer pixels, and you will end up with overlaping sprites!! ;)
check it out and give me some feedback please,
You must be logged in to reply to this topic.