CSS Sprites

CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coorindates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image.

This technique can be very effective for improving site performance, particularly in situations where many small images, such as menu icons, are used. This can be used for creating multiple Menus with normal and hover background images or multiple logos ( i.e. clientele page logos).

Following figure is the set of icons with normal and hover state. Using this image in a background and adjusting its x and y positions on hover state will give you final result. That means, instead of having 6 different icons (3 for each normal state and 3 for hover) we can have one single image with its position adjusted thorugh css class. It helps to reduce number of http requests being sent to server.



CSS sprites compatible with each and every browsers if it is used with proper syntax and proper html stucture. No need to use css fixes. I have tested it on IE6, IE7, Mozilla firefox 2, 3, opera, Google chrome and Safari.