Click here to Skip to main content
15,867,834 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
hi ppl
many site send one picture than contains almost all icon or any other image that they are using on that web page.
i mean for example if you see recieves from google there is only on image sent that contains all used icon on the page and they are arranged at clinet!
HOW? any info?
thx
Posted

This techniques is know as css-spirits. Where all images are combined into one image and call the same image all over the website if necessary. First you should know the advantage of using css-spirits.

1. Each images used in webpage is considered as a one http request while loading.
2. Webpage load time depends on number of requests in a page.
3. As the number of requests is less obviously page load time is less.
4. Also if you use multiple images they consume more space, so better to combine them into one.
Using css property called background we can call images.
Ex:
CSS
body
{ 
   background-image:url('smiley.gif');
   background-repeat:no-repeat;
   background-attachment:fixed;
   background-position:center;
}

Note: You should know positions of each images while using.
See below links more details..
http://www.w3schools.com/cssref/pr_background-position.asp[^]
http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-position[^]
http://css-tricks.com/css-sprites/[^]
Hope this will helps you lot..
 
Share this answer
 
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900