CODEWITHSUNDEEP
htmlimage
Eugene
Eugene

Reputation: 11270

Why and how images are kept in one image?

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

google

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

enter image description here

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

Upvotes: 2

Views: 67

Answers (3)

Haza
Haza

Reputation: 2999

This is called "CSS Sprites".

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

And many more ...

Upvotes: 3

James.Xu
James.Xu

Reputation: 8295

This technology is called CSS Sprite. To reduce the http connections number needed to load multiple images. Usually this is done by designer.

Upvotes: 3

Fender
Fender

Reputation: 3055

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

Upvotes: 4

Related Questions