CSS - using one background image with multiple images on it

css background css-sprites
Roman picture Roman · Mar 4, 2011 · Viewed 23.4k times · Source

I've observed that often the websites use only one background image which contains multiple images on it. For example, instead of using separately icons, all of the icons are put on one image and then the different parts of image are used in different section.

  • Is there any advantage to this?
  • How can this be used?

For example, for the following Stack Overflow sprite, how would I display just one of the images?

Stack Overflow Sprite Example

Answer

vbence picture vbence · Mar 4, 2011

The technique is called CSS Sprites. Basically you use CSS's background-position property and fixed height or width for your element.

If your elemnts are fixed width and fixed height at the same time you can freely create a more compact image. See this site for more complex examples.

Related questions

Stretch and scale a CSS image in the background - with CSS only

I want that my background image stretch and scale depending on the browser viewport size. I've seen some questions on Stack Overflow that do the job, like Stretch and scale CSS background for example. It works well, but I want …

Read More
div background color, to change onhover

I'm trying to make a div's background color change on mouse over. the div {background:white;} the div a:hover{background:grey; width:100%; display:block; text-decoration:none;} only the link inside the div gets the background color. what could I …

Read More
How to get div height to auto-adjust to background size?

How do I get a div to automatically adjust to the size of the background I set for it without setting a specific height (or min-height) for it?

Read More