CODEWITHSUNDEEP
csssprite
user2146021
user2146021

Reputation: 47

How to use sprites within a web page

I have been intrigued about using sprite images.

For educational reasons I have been studying the CSS of SO and found out that instead of seperate images, items for like the up + down vote amongst other things is taken from an entire png image.

background-image:url('img/sprites.png?v=5')

How would I go about pulling an individual image from an assembled png? so I can put it on use within my site, this it seems more efficient than having tons of images in a sub directory, rather than a collection of the main images within 1?

Upvotes: 0

Views: 117

Answers (1)

javex
javex

Reputation: 7544

The key is background-position: You build such a sprites image and then calculate the offset for each image. Then you set the appropriate value. You also have so specify the correct width and height for the element holding your background.

Example (from the up arrow here):

background-position: 0 -265px;
height: 25px;
width: 41px;

You set the same background-image but different positions.

Upvotes: 2

Related Questions