How Sprites Work


The basic idea is to do away with the <img> tag and JavaScript onmouseover and onmouseout events in exchange for using CSS to assign a background image to and style elements such as a <div>, list or anchor. By adjusting the x y coordinates of the background image we can specify which "image within the image" is shown in the visible area.

The sprite below contains normal and hover state buttons as well as a background image for the header. Each button is 100px wide and 47px tall and the header background is 100px wide and 135px tall. Note the 1px spacing between each of the images.

Figure 1

Let's do a quick refresher on the CSS background attribute. The background attribute supports five properties: background-color, background-image, background-repeat, background-attachment and background-position (where you can set the x y coordinates).

X Y Coordinates


The starting coordinates of a background image are x=0 y=0 as depicted in Figure 2.

Figure 2

When you change the x y coordinates of a background image the entire image actually shifts up, left or both depending on the coordinates you set. As you saw in Figure 2, the x y coordinates of the normal state button start at x=0 y=0, the hover state at x=0 y= -48px and the header background portion of the sprite starts at x=0 and y= -96px.

Figure 3 depicts what happens to the background image when you apply the hover state coordinates and Figure 4 depicts what happens when you set the coordinates for the header.

Figure 3

The thing to notice is that the portion of the sprite that used to sit at x=0 y=0 changes to the portion of the sprite located at x=0 y= -48px and x=0 y= -96px respectively. If you were to set a negative x coordinate the background image would shift left.

Figure 4

Continue with The Examples ➜