Mike's Catalog of Shirts - Can anyone explain which bit of the CSS file relates to the icons on the navigation bar?

Dan,

Let's see if I can help. First off, let's clarify why he is using a sprite image. In case you don't know, sprites are used to reduce the server requests when loading a page. Instead of having multiple images for each image element on the page, a developer compiles all of the images onto one large master image.

Once the developer has their single master image, they can now use a positioning property to move around the single master image to best suit what is supposed to be displayed in that image element.

Here is a bit of sample code from: http://www.w3schools.com/css/css_image_sprites.asp that might help understanding the concept a little easier.

img_one {
    width: 46px;
    height: 44px;
    background: url(nav-sprite.png) 0 0;
}

Notice how the last thing processed is the position of image? This will show the image from the left and right position of 0, and it will also only show about 46 square pixels. So, if the large master image is say 500px, only a fragment of the image is showing.

In your case of the vertical image being used for a horizontal navigation of images, the position property is being used to only show a small fragment of the larger image.

Hope this helped.