- This topic is empty.
October 31, 2012 at 5:50 am #40538
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.
StevenOctober 31, 2012 at 6:25 am #113009
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?October 31, 2012 at 6:34 am #113010
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.October 31, 2012 at 7:48 am #113013October 31, 2012 at 9:22 am #113012
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.October 31, 2012 at 9:29 am #113019
Thanks, But I can’t really use pseudo-elements as I need this to work on ie6+October 31, 2012 at 9:33 am #113020
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.October 31, 2012 at 9:50 am #113025
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.October 31, 2012 at 10:12 am #113028
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.
- The forum ‘CSS’ is closed to new topics and replies.