Help me design my sprite, please!!

[Steven Gardner]

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

[Paulie_D]

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?

[Steven Gardner]

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

[Paulie_D]

You might find these useful:

https://css-tricks.com/video-screencasts/43-how-to-use-css-sprites/

https://css-tricks.com/video-screencasts/105-using-spritecow/

[Paulie_D]

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.

[Steven Gardner]

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

[Paulie_D]

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.

[Steven Gardner]

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.

[Paulie_D]

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.

[Author]

Posts