CODEWITHSUNDEEP
cssbackgroundcss-sprites
Roman
Roman

Reputation: 173

CSS - using one background image with multiple images on it

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.

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

Stack Overflow Sprite Example

Upvotes: 17

Views: 26092

Answers (7)

Dean Smith
Dean Smith

Reputation: 120

It has been common for a while to put two images on one sprite sheet, but the tendency has been moving towards combining ALL of your background images on the same sprite sheet to load just one file for all of them. There's a rather good tutorial here.

Upvotes: 0

vbence
vbence

Reputation: 20333

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.

Upvotes: 23

Jan Daniel
Jan Daniel

Reputation: 131

And with CSS sprites is also possible to make e.g. menu button hover effect without waiting until second image loads. see

Upvotes: 1

sandeep
sandeep

Reputation: 92793

yes , using sprites is good for website performs because every single component on website send different http request .So, when we use sprites images the http request become less & website performance increase.That rule is also apply on css also less css files less http request. you can yourself with the help of safari web inspector.

for more better performance download "yslow"

Upvotes: 1

RoToRa
RoToRa

Reputation: 38420

It has the advantage that only one image needs to be loaded so that things like hover (roll-over) effects are faster. The technique is usually called "CSS sprites". Google for it.

Upvotes: 0

Dave Kiss
Dave Kiss

Reputation: 10485

You are talking about CSS sprites, in which the background position changes on hover. Learn more here:

http://css-tricks.com/css-sprites/

Upvotes: 5

awm
awm

Reputation: 6570

Change the css property background-position.

Upvotes: 2

Related Questions