Creating and Using a Sprite Sheets in HTML and CSS - Part 2

In Part 1 of this series we covered what a sprite sheet is and how they work in web design. In this part we look at how to create rollover effects using sprite sheets and how to create your own sprite sheet.

Rollover effects using sprite sheets

Using sprite sheets in rollover effects is also pretty easy. First, create a sprite sheet (explained below) that contains both the inactive and active states of the rollover. Here's a simple example:

buttons example

Here I want the green button text to be the inactive state and the red text to be the active state. All we need to do is change the background-position on a CSS :hover state to trigger the rollover:

.rollover {
    background: url('rollover1.png') no-repeat;
    width: 100px;
    height: 35px;
    display: inline-block;
    background-position: 0 0;
.rollover:hover {
    background-position: 0 -35px;

Now in the browser, the rollover div displays the green button text. When you move the mouse over the div, the red button text is displayed.

Remember, you can also combine multiple rollover images together into a single larger sprite sheet for better efficiency.

Creating your own sprite sheet

Creating your own sprite sheet is also fairly straightforward, especially if you're using a drawing tool like Illustrator or Photoshop that provides layer and/or guidelines:

  1. Determine the size you want your images to be. For example, let's say I want to make nine 30 pixel square icons.
  2. Figure out the spacing between each icon in your sprite sheet. To keep the math simple I'm going to use a 10 pixel spacing.
  3. Create a guide grid by placing guides or by drawing the grid on a separate, semi-opaque layer. This grid should ideally start in from the edges of the sheet. Each grid cell should be the total size of the icon plus the spacing, so 40 pixels in our example.
  4. Draw (or copy) the icon images inside the grid cells, aligned to the top left corner of each cell. It should be pretty simple to work out the offsets for each cell at this point. Assuming we used a 20 pixel margin around a 3 x 3 grid, the offsets in our example should be:
    • Top row: 20px 20px, 60px 20px, 100px 20px
    • Middle row: 20px 60px, 60px 60px, 100px 60px
    • Bottom row: 20px 100px, 60px 100px, 100px 100px

Don't forget to use negative values when setting the background-position property for each icon.

Keep in mind that the icons, chicklets, buttons, or whatever other graphics you want do NOT have to be the same size. As long as you know the size of the graphic element, and its offsets in the sprite sheet, you can have several mixed-sized buttons in the same sprite sheet, like this one:

sprite sheet 2


Using a sprite sheet generator

If you don't want to go to the trouble of creating your own sprite sheet, especially if you already have your graphics as separate files, you can use one of the many sprite sheet generators available online. Many of these tools are web-based applications, like CSS Sprite Generator or ZeroSprites.

I've noted that a lot of the download tools are more focused on creating image assets for games rather than for website use, so they may not be as suitable for web design.

Note that most of these tools require that you have already created the images you want to combine into your sprite sheet. If you're starting completely from scratch, you may want to just put all your icons on a single sheet right at the outset. However, you have more flexibility if you initially create each graphic in a separate file and then combine them into your sprite sheet once you've finalized each one.


Sprite sheets are a great way to optimize a site that uses many smaller images by consolidating them into a single, larger image and controlling it using CSS instead of using a Javascript loading script.

Creating sprite sheets isn't difficult, even when creating them from scratch. There are tools out there that make their creation even easier by automatically or manually consolidating all your graphics files into a single larger image.

You can learn more about this and other advanced techniques in our advanced HTML course.


Related HTML/CSS Lessons

Onsite HTML/CSS training

Through our network of local trainers we deliver onsite HTML/CSS classes right across the country. Obtain a quote for an onsite HTML/CSS class.

To view a sample of our past students testimonials, please click on the following link: HTML/CSS reviews.