Grow your CSS skills. Land your dream job.

[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:

    CSS:
    div {
    width: 25%;

    img {
    max-width:100%;
    }
    }

    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 11:55 am

    You could use the _background-size_ property with percentages.

    # 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.

    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!

    # 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 4:53 am

    @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…

    # 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

    .sprite {
    width: 10%;
    height: 0;
    padding-bottom: 10%;
    }

    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 :)

    # May 31, 2013 at 6:48 am

    Thanks @CrocoDillon, will take a look ASAP!

    # 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:

    https://github.com/AdamBrodzinski/Retina-Sprites-for-Compass

    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.

    http://demo.chilipress.com/epic3/

    http://stackoverflow.com/questions/22539199/how-to-make-my-sprite-responsive/22626861#22626861

    http://brianjohnsondesign.com/unlisted/demos/responsivesprite/

    No need for slicing (with photoshop), javascript or pulling your hair out of your head.
    Simply a matter of CSS and grasping the fundamentals of it.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".