Web Applications Stack Exchange is a question and answer site for power users of web applications. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

Now I'm exploring the source code of many website to learn their techniques, one thing I've found is that they using an image file that usually with transparent background and a lot of icons scattered in this single image. and using background image position attribute to position these icons in different place in the page.

I'm very interested about this technique and want to learn more about it, anyone can give me the resources of how to make these and what's the technique name of this?

share|improve this question

closed as off topic by Alex, Al E., phwd Sep 11 '12 at 4:14

Questions on Web Applications Stack Exchange are expected to relate to web applications within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

They are called CSS sprites. Check this Smashing Magazine article. – Alex Sep 7 '12 at 6:57
@Alex Thanks for your quick comment, so it's not the same thing to psd slicing? – mko Sep 7 '12 at 7:02
No, it’s not the same. – Alex Sep 7 '12 at 7:18
up vote 1 down vote accepted

Believing you are talking about CSS Sprites, it's a good practice of handling images(especially for navigation) and also the number of HTTP requests.


Get the image once, shift it around and only display parts of it, saves the overhead of having to fetch multiple images

You don't use a whole bunch of small images (such as icons and menu buttons) but collate them all into one larger image (which requires only one HTTP request to load it instead of a whole series of them) and then use CSS to select and display only a certain rectangle from that image (using width, height and position offset) as a background image.

There are n number of tutorials and even CSS Sprite Generators(but I dont have any personal experience on using generators) that would help you explore the technique.

FYI: The best practice of working on sprites is either before designing the website(where you will assume the required images) or at the end of the design(by then you will be sure of the required images--more recommended--)

I guess this would be a best place to start with: http://css-tricks.com/css-sprites/

Google them! Explore!!

share|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.