Creating CSS sprites with TexturePacker

Learn how to create a css sprite sheet with TexturePacker and iclude it into your webpage.

CSS Sprite sheets improve loading times for web pages - especially if you have many small graphics and icons on them. Instead of loading each single sprite, the complete sheet is loaded at once as one big image. A CSS style sheet assigns the different images to the elements on the web page.

If you want to create a button with a hover effect you simply need 2 files:

The file extension -hover is important since this will be used as part of the css selector.

Drag all the files you want to add to the right pane of TexturePacker:

This will create a css style sheet looking like this:

.sprite {
  display:inline-block; 
  overflow:hidden; 
  background-repeat: no-repeat;
  background-image:url(css.png);
}

.download {
  width:80px; 
  height:31px; 
  background-position: -160px -160px
}

.download:hover {
  width:80px; 
  height:32px; 
  background-position: -80px -160px
}

With more buttons added the resulting image file looks like this:

Using the sprite is simple - just add the sprite sheet to the header of your web page and add this code to place a sprite:

<span class="sprite download"></span>

In case you are not satisfied with the output format you can download the new 3.0.0 version and create your own template - just like you need it.