Forums

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

Home Forums CSS Help me design my sprite, please!!

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #40538
    Steven Gardner
    Participant

    Hi guys,

    I need to create a sprite with all my main task icons. There will be around 30 or so and the backgrounds there are applied to can vary in size.

    Most boxes are 250px wide and 85px high with the background image Icon being 64px X 64px. However some boxes will double or treble in width and height and its this change in background size that’s causing me issues when creating a sprite.

    My sprite ends up being huge with a huge amount of white space to allow for larger background sizes.

    I feel like I must be looking at this the wrong way but any help would be appreciated.

    I’m working locally so can’t really post a url to what I’m working on to show you.

    Thanks
    Steven

    #113009
    Paulie_D
    Member

    An icon that is 64×64 will look horrible at four or nine times the size and I can’t think why a ‘task’ icon would need to be bigger or smaller.

    I’m thinking that sprites are not what you are looking for.

    Do you have an image of your design or perhaps you could make a reduced case in Codepen?

    #113010
    Steven Gardner
    Participant

    Sorry I haven’t explained my self to well.

    The containing div is 250px wide and 85px high.
    The background Images I want to use as sprites are 64px X 64px.

    Its the containing div that will change size not the icon itself.

    I can take screen shots of my problem but this forum doesn’t allow images to be attached by the look of it.

    HERE is a codepen example. The icon would be in the top left of the box. Its the box that will change size but the icon will still remain in the same position.

    Codepen Example

    #113013
    Paulie_D
    Member
    #113012
    Paulie_D
    Member

    On thinking about it, I’m wondering if you need all that mark-up.

    You’ll still need a sprite but this might help: http://codepen.io/Paulie-D/pen/zqcnm

    I used a pseudo-element (which can be positioned anywhere) to hold the sprite.

    #113019
    Steven Gardner
    Participant

    Thanks, But I can’t really use pseudo-elements as I need this to work on ie6+

    #113020
    Paulie_D
    Member

    Then I suspect that a sprite isn’t going to work unless we can change the markup somehow.

    A sprite (AFAIK) is supposed to cover the whole background of the element and that’s not happening here.

    I’ll have another think though.

    #113025
    Steven Gardner
    Participant

    I can edit the markup no problem.

    I was thinking of having a empty span tag with a set width and height of 64px but I think that’s bad practice.

    #113028
    Paulie_D
    Member

    At the moment my thoughts are that a sprite is not the option you want. I’m thinking that individual images would be better, but as I said, I’ll think on it.

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.