Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: Javascript CSS HTML
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 4-Apr-13 10:56am
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 3

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:
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..
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

  Permalink  

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

  Print Answers RSS
0 OriginalGriff 7,903
1 Sergey Alexandrovich Kryukov 7,192
2 DamithSL 5,604
3 Manas Bhardwaj 4,986
4 Maciej Los 4,820


Advertise | Privacy | Mobile
Web02 | 2.8.1411023.1 | Last Updated 5 Apr 2013
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100