Css Sprite question, is there a better way?

Question

I am a great lover of sprites, but. Got thinking, I do everything long hand, so was wondering if there was a shortcut.

Essentially, creating a sprite is easy. Making the sprite work is easy, but doing lots of sprites, gets laborious.

So was wondering what is the cleanest way of doing multiple sprites, that I can position anywhere on our web pages. I have seen multiple sprite sheets, similar to jquery ui icons, but we have our own icons. So was wondering if there was a cleaner method.

All up we will have approx 16 to 20 sprites in the set. Below is sample of html and css.

#logo-link
{
    width:32px;
    height:32px;
    text-decoration:none;
    display:block;
    background-image:url(sprites/analytics.png);
    background-position:0 32px;
}
#logo-link:hover,#logo-link:active  { background-position:0 0; }

#logo-link2
{
    width:32px;
    height:32px;
    text-decoration:none;
    display:block;
    background-image:url(sprites/addlisting.png);
    background-position:0 32px;
}
#logo-link2:hover,#logo-link2:active    { background-position:0 0; }

html

<a href="link1.html" id="logo-link"> </a>

<a href="link2.html" id="logo-link2"> </a>

Any thoughts, on refining our sprites. Or should we create a sprite sheet with all sprites on ?

Image sample:

alt text

Added basic sprite sheet on x axis

alt text

Example:

alt text

Ok Guys:

So far I have this in css:

.sprite
{
    width:32px;
    height:32px;
    text-decoration:none;
    display:block;
    background-image:url(sprites/spritesheet.png);
}

.addlisting{background-position:0 32;}
.addlisting:hover{background-position:0 0;}
.addanalytics{background-position:64 32;}
.addanalytics:hover{background-position:64 0;}
.addprofile{background-position:32 32;}
.addprofile:hover{background-position:32 0;}

html I have:

<a href="link2.html" class="sprite addlisting"> </a>

<a href="link2.html" class="sprite addanalytics"> </a>

<a href="link2.html" class="sprite addprofile"> </a>

What I really dont get ( see the spritesheet.png I made above , is why profile is at co-ordinates 32,32 and why analytics is at co-ordinates 64,32

Perhaps I have my co-ords wrong lol

This is driving me mad now, argghhh

Added the actual sprite sheet now, but I am buggered if I can get so-ordinates to play with me lol Image added:

![alt text][5]

Finally figured it out.

Something related, if you want to get the sprite x and y in ease, use tools like getspritexy.com — kiranvj

Evan Mulawski Evan Mulawski · Accepted Answer · 2010-12-03T23:29:06

Using a sprite sheet is beneficial to both the server and the end users, because the browser only needs to download one image instead of multiple images. Therefore, whe navigating to different pages, the browser does not need to download additional images since the master sprite sheet has already been received.

Also, in regards to your stylesheet, it may be easier to have a master link class that sets everything except the background-position property. This would decrease the size of the CSS and make it easier to modify in the future.

Css Sprite question, is there a better way?

4 Answers