What Are CSS Sprites?● The term “sprite” (similar to “spirit,” “goblin,” or “elf”) has its origins in computer graphics, in which it described a graphic object blended with a 2-D or 3-D scene through graphics hardware.● Sprites were plugged into a master grid, then later pulled out as needed by code that mapped positions of each individual graphic, and selectively presented them on the screen.
What Are CSS Sprites?● With CSS Sprites multiple images are used throughout a website which are combined into the so-called “master image.”● To display a single image from the master image, one would use the background-position property in CSS, defining the exact position of the image to be displayed.● Any hover, active or focus effects would be implemented using the simple definition of the background-position property for the displayed element.
How Does The background- position Property Work?● According to CSS specifications, the background-position takes two (optional) arguments: horizontal position and vertical position. For example:
● Using this property, you can define the exact position of the background image for the block-level element (list item li). You can use either % or px units (or mix both) to define the starting position (i.e. the upper-left corner) of the displayed part of the master image. Alternatively, you could use the following keywords: top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right.
● If background-position: x% y%, the first value is the horizontal position, and the second value is the vertical position. The top-left corner is 0% 0%. The bottom-right corner is 100% 100%. If you specify only one value, the other value will be 50%.● … then the background-image will be positioned 19 pixels from the left and 85 pixels from the top of the list item element.
● As SitePoint’s reference article explains: “a background-image with background-position values of 50% 50% will place the point of the image that’s located at 50% of the image’s width and 50% of the image’s height at a corresponding position within the element that contains the image.● This causes the image to be perfectly centered. This is an important point to grasp — using background-position isn’t the same as placing an element with absolute position using percentages where the top-left corner of the element is placed at the position specified.”
Demo● I have a color version and a grayscale version which I have merged into one file as you can see below.
● When the image initially loads, I want the grayscale version, which is on the right site.● For this reason, I set the links initial background position 191 pixels to the left. (image size> width:191px; height:151px; )● When someone mouseovers the link, however. I want to show the color version. Its only then that I remove the 191 pixels.
Further Reading/Referances List Apart> http://www.alistapart.com/articles/sprites/ Smashing> http://coding.smashingmagazine.com/2012/04/11/css-sprites-revisited/#more-129723● http://www.smashingmagazine.com/2011/11/23/exporting-from-photoshop/● http://coding.smashingmagazine.com/2010/03/26/css-sprites-useful-technique-or-potential-nuisance/ CSS Tricks>● http://css-tricks.com/css-sprites/ W3school >● http://www.w3schools.com/css/css_image_sprites.asp