How to use CSS Sprites

Hi all,

I am a web designer and build a project on website. I want to know that system CSS Sprites concept, purpose and usage, I believe this would help me for great make great efforts in my website. Thanks in advance. :thumbup1:

CSS Sprites is not a new technology, now it has been WebDeveloped a more mature development. CSS Sprites is not a golden rule, but in many cases, it has certain advantages, the most important is that it can reduce the server load, improve your page loading speed. "Sprite" is such a technique, it combined a number of images into a grid, and then process the contents of each grid location to the screen.

CSS Sprite has been targeted to a static picture, and through a simple process or hardware, you can correct positioning of the screen, like the one pictures is "change" out, and they did not occupy a separate memory, it has been named for the "Sprite Wizard." CSS Sprites can be used on many occasions, large sites can be many separate pictures combined organic way, making it easy to maintain and update. Between pictures often leave a large gap, making pictures will not affect theWebContent. But mostly used in CSS Sprite over a fixed pixel location, it's less flexible, receive positioning factors.

Here are someCSS Sprites Use examples:
# Xing -This site will provide a number of buttons, icons, and made a LOGOCSS Sprites.
# Amazon - Amazon uses a large, tidy and neatCSS Sprites.
# YouTube - YouTube uses a 2008 pixel high -CSS Sprites.

check the above site and reply. :ohyeah:

You are using different tool for CSS sprites. I give you some example.
# DURIS (Data URI [CSS] Sprites) is a managementWe***cture a new tool, it can help you reduce the maximum number of background images to reduce the number of requests.
# Spritr -A generation CSS Sprites of simple tools
# CSS Sprite Generator - ProductionCSS sprites of Drupal plug-in
# CSS Sprites Generator - This tool allows you to upload multiple pictures generatedCSS Sprites and CSS code.

Check that and reply.

Use CSS Sprites, you can write a small part of an object loaded rollover effect, the use of negative background image position ( background-position ), You can create CSS-based image mapping. BasedCSS The image map of the simple example. BasedCSSThe image map of the simple example. You can with the the traditional way compare advantages and disadvantages. Check and reply.