I've noticed that recently sites began to keep images in one big image.
For example google.com

![google](https://i.stack.imgur.com/Gl6qC.png)

We see a lot of little images on left side. But really is one image:

![enter image description here](https://i.stack.imgur.com/zY7Gw.png)

How these images are cut and shown? (firebug says that it's just element with width and height, but where X and Y position is pointed and how?)

Thanks for reply
['https://Stackoverflow.com/questions/5474564', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/547242/']
with css background the image is moved to the right position. the other part of the image is not shown, because the element with the image as background is exactly as big as the wanted picture part.

try changing the px values in the css in the background part. you should see the image moving

```
<span style="background-position:-20px -132px" class="micon"></span>

```

here you see the background-position which is used for this image
This is called "**CSS Sprites**".

There are a lot of informations on Internet about that. In random order : 

* [Smashing Magazine](http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/)
* [CSS Tricks](http://css-tricks.com/css-sprites/)
* [A List Apart](http://www.alistapart.com/articles/sprites)

And many more ...