Single Image + without cut out how can i call in to HTMl page

Hi

i have one question

without cut out i want to call image different part in html

i am attaching image

there is lot of icon but i have seen it is possible i do not need to cutout every icon i just call from single image

how can it will be possible ?

what method it is called ?

 

this is called css sprites. You have a one big image with all icons/images in it and position them with css so that only the required image is visible.
This is done to reduce http request which will improve the page load speed.

check this http://www.w3schools.com/css/css_image_sprites.asp , this may help.

 

The above answer is correct. I just want to add something. There are two ways of doing it, though. I prefer the compact one, but choose the best one yourself.

Let's take the same image you posted the link of :


I need that briefcase icon (the next to last one).

So I can either write :

#briefcaseicon {
background: url(sprite.png) no-repeat -433px -145px;
width: 12px;
height: 12px;
}

Or :

#briefcaseicon {
background-image: url(sprite.png);
background-repeat: no-repeat;
background-position: -433px -145px;
width: 12px;
height: 12px;
}



Choose the version you prefer and enjoy!

 

make sure you are using png's

 

how can i decided this

-433px -145px

 

can anyone give me example like whole website image come fro one layout mins whole webpage come from 1 inmage

 

There's how :



And about the second question, facebook is an answer. However, doing that really isn't recommended, and internet can tell you why.

 

CAN you give me Facebook image link which they hAVE USES?

 

There you go. Just quote my post if you want to see the links.

 

WOW...I didn't know you could do that!