No es una pregunta tonta, ninguna lo es, para eso es el foro para sacarse las dudas pregunta sin miedo.
A esas imágenes se les llama "Sprites" se usan para no cargar tanto el sitio.
Para usar solo un trozo como dijiste, tenes que colocarla de "background-image" de un elemento, y usar "background-position" para elegir que parte de la imagen se va a mostrar..
Te dejo un ejemplo para que veas como funciona:
Supongamos que tenes un botón, querés que sea el cuadradito celeste y cuando se pase el cursor por encima cambie al amarillo. Primero tenes que darle un tamaño al botón (lo que mida la parte de la imagen que querés mostrar), en este caso 30px x 30px.. con background-image agregas el sprite y con background-position la acomodas, teniendo en cuenta que el primer valor es X (horizontal) y el segundo es Y (vertical)..
X con valor negativo mueve la imagen a la izquierda y con positivo a la derecha.
Y con valor negativo mueve la imagen hacia arriba y positivo hacia abajo.
Si usas TOP, BOTTOM, LEFT o RIGHT.. la imagen se pega al lugar que indicaste respectivamente.
Código CSS:
Ver originalbutton{
width:30px;
height:30px;
background-image:url("http://i.imgur.com/ZBrZ1TO.png");
background-position:-40px top;
}
button:hover{
background-position:-40px -200px;
}
Te dejo una
Demo
Saludos
