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.
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...
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!
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.
@dmakerman, yeah I never found a solution that worked. Ended up just using an img element, where I needed responsive behavior, or in other cases using media queries to switch between sprite icons of different sizes...
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 :)
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!
You could use the background-size property with percentages.
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...
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.
http://stackoverflow.com/questions/9151625/fluid-layout-and-css-sprites http://chiefalchemist.com/responsive-css-sprites-proof-of-concept-v0-1-0/
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!
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.
@dmakerman, yeah I never found a solution that worked. Ended up just using an img element, where I needed responsive behavior, or in other cases using media queries to switch between sprite icons of different sizes...
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-sizeandbackground-positionto make your sprite responsive. If you want a demo, you can look here: http://codepen.io/CrocoDillon/pen/ekuxb and inspect the#stagediv, 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 :)