Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Responsive Sprites using Compass/SASS?

  • This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #42107
    ethanmiller
    Participant

    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!

    #121500
    instantMash
    Member

    You could use the _background-size_ property with percentages.

    #121514
    ethanmiller
    Participant

    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…

    #124507
    Preface Studios Ltd
    Participant

    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!

    #135009
    dmackerman
    Member

    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.

    #135138
    ethanmiller
    Participant

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

    #135140
    CrocoDillon
    Participant

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

    #137133
    ethanmiller
    Participant

    Thanks @CrocoDillon, will take a look ASAP!

    #145225
    Locke
    Participant

    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

    #166737
    epicmasterz
    Participant

    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.

    #195246
    wolfitoXtreme
    Participant

    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.

    You need:
    *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,

    demo

    #195324
    wolfitoXtreme
    Participant

    well I did the percentage version already, look here:
    demo

Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘CSS’ is closed to new topics and replies.