Getting started with TexturePacker and CSS

This overview shows you how to create your first sprite sheet and include it into your webpage.

These easy steps will cost you only a few minutes - but make your development much easier. Promised!

1.
Open TexturePacker, select css as framework.

TexturePacker: Select css as framework

2.
Add sprites ...

Drag & drop sprites
onto TexturePacker.


... or folders

TexturePacker adds
all sprites inside the folder
and updates the texture
when the content changes.

Add Sprites to TexturePacker

3.
Set output files
Make sure to set the output path of both files so that the images can be reached from your web project.

Set the output path for your files

4.
Click Publish sprite sheet to write the sprite sheet to your desired destination.

TexturePacker: Click Publish sprite sheet

5.
Include the CSS output
into your HTML

or reference the style sheet from the header section.

.sprite {
    display:inline-block;
    overflow:hidden;
    background-repeat:no-repeat;
    background-image:url("https://cdn.codeandweb.com/path/to/spritesheet.png");
}
.capguy {
    width:123px; height:273px;
    background-position: -0px -0px;
}
.capguy:hover {
    width:123px;
    height:273px;
    background-position: -123px -0px;
}

6.
Place the <span> tag
where you want your sprite to appear.

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

Do you want to read more?

Read our blogpost about CSS animation examples or

head over to our tutorials section.

Do you have any feedback or questions?