Name of function where png group of icons is used but only one is displayed?

Question

I'm trying to understand a problem I'm having with a slider but realized I don't know what this function is called so I can learn more.

The slider has a PNG with Play, Pause and some dots in both light and dark (rollover) versions that are all in the same image. Each is displayed on the page where they are called for.

I wanted to know what this is called so that I can read more about it and understand how to use it.

Answer 1

I think the term you're looking for is "sprites", sometimes called "CSS sprites". The idea is that instead of having multiple small images for each thing you have a larger image with all your icons and you change the icon using the overflow and background-position CSS properties. This improves caching and decreases file requests (which is important on limited platforms such as mobile or dialup).

Here's the first google result, and css-tricks is fairly reputable: http://css-tricks.com/css-sprites/