How do I create the CSS that represents a sprite image?

Question

Given a sprite image, one with all the images in one file, I want to generate the CSS that would represent each of the characters. I have looked at a number of the sprite creation tools out there and they all assume that you have a directory of images that you want to combine into a sprite and at the same time generate the CSS.

Does such a tool exist? I have a few tens of sprite images like this that I need to process. Doing it by hand is out of the question.

Thanks! Cheers!

http://imgur.com/1GHow Like this image.

I think that the reason why what you're asking for is so hard to find is that the software has a difficult time identifying the borders between the individual sprites from single large image. In any case, have you see all of the Sprite Generators listed here: http://stackoverflow.com/questions/4968702/looking-for-a-good-image-sprite-generator-tool ? — KatieK, Nov 15 '12 at 23:10
out of the question? for tens of sprites? The directory of images is logical since the utility will place each image at a coordinate and understand its dimensions. If not, you expect it to just know where one sprite begins and another ends. No such tool exists as I know it. Doesn't mean it doesn't exist somewhere. Just not to my knowledge. Good luck though. — Kai Qing, Nov 15 '12 at 23:12
Given that they are in a regular grid, it'd be pretty easy to write a Sass function that would spit out the CSS. Alternately, you could use Photoshop or Imagemagic to [split the images up](http://graphicdesign.stackexchange.com/questions/7274/create-icons-from-sprite-image) and then use a variety of tools to create the CSS. — steveax, Nov 15 '12 at 23:18

steveax · Accepted Answer · 2012-11-16T19:45:51.817

Given the sprite sheet is arranged in a regular grid, Sass will do this easily:

Sass

$sprite-sheet-width: 384;
$sprite-sheet-height: 384;
$sprite-cols: 12;
$sprite-rows: 8;

$sprite-width: $sprite-sheet-width/$sprite-cols;
$sprite-height: $sprite-sheet-height/$sprite-rows;

@for $i from 0 to $sprite-rows {

    @for $j from 0 to $sprite-cols {
        .sprite-#{$i}-#{$j} {
            $top: $i * $sprite-height;
            $left: $j * $sprite-width;
            background-position: $top $left;
        }
    }

}

Compiled CSS

.sprite-0-0 {
  background-position: 0 0; }

.sprite-0-1 {
  background-position: 0 32; }

.sprite-0-2 {
  background-position: 0 64; }

.sprite-0-3 {
  background-position: 0 96; }

.sprite-0-4 {
  background-position: 0 128; }

.sprite-0-5 {
  background-position: 0 160; }

.sprite-0-6 {
  background-position: 0 192; }

.sprite-0-7 {
  background-position: 0 224; }

.sprite-0-8 {
  background-position: 0 256; }

.sprite-0-9 {
  background-position: 0 288; }

.sprite-0-10 {
  background-position: 0 320; }

.sprite-0-11 {
  background-position: 0 352; }

[...]

.sprite-7-0 {
  background-position: 336 0; }

.sprite-7-1 {
  background-position: 336 32; }

.sprite-7-2 {
  background-position: 336 64; }

.sprite-7-3 {
  background-position: 336 96; }

.sprite-7-4 {
  background-position: 336 128; }

.sprite-7-5 {
  background-position: 336 160; }

.sprite-7-6 {
  background-position: 336 192; }

.sprite-7-7 {
  background-position: 336 224; }

.sprite-7-8 {
  background-position: 336 256; }

.sprite-7-9 {
  background-position: 336 288; }

.sprite-7-10 {
  background-position: 336 320; }

.sprite-7-11 {
  background-position: 336 352; }

You can try it out with the online compiler

score 0 · Answer 2 · answered Nov 15 '12 at 22:46

0

http://cssspritegenerator.net/howto.php

Start by creating an account. If you have your images ready and quickly want to use CSS Sprite Generator without creating an account that is fine, just use "skip login" alternativ. If you pick this metod your account will be deleted after 24 hours and you cannot retreive your password for further usage if you want to add more images to your sprite.

answered Nov 15 '12 at 22:46

Sameera Thilakasiri

9,452
10
51
86

That is exactly what I don't want. I don't want to upload a bunch of images. I have the ONE image file that contains all the sprites. That is what I need to have decomposed and CSS generated from. – DigiLord Nov 15 '12 at 22:52

How do I create the CSS that represents a sprite image?

2 Answers2

Linked