2. What is Image Sprite
• The idea behind CSS sprite is to consolidate multiple
images into one sprite and then selectively display
portions of this sprite with positioning.
• It has its origin in Computer Graphics
• Sprites are the master image from which individual
images can later be pulled for website design as needed
by the code.
• Displayed as a static or dynamic background image
3. Advantages of CSS Sprite
• A web page with many images can take a long time to
load and generates multiple server requests. Using
image sprites will reduce the number of server requests
and save bandwidth.
• CSS sprites reduce HTTP requests
• CSS sprites are commonly used, particularly for
navigation (such as for hover effects), icons and buttons
4. Disadvantages of CSS Sprites
• Maintenance : Changing the size of an icon in a sprite,
also need to adjust the CSS to fix the positioning,
padding, or dimensions of the element
• Accessibility : While using background images we
remove the image tag from the markup, which could
reduce the meaningfulness of the content
5. Where are CSS Sprites Used
• CSS sprites are mainly used in a pixel based design.
• CSS sprites are used to keep the design maintainable
and easy to update.
6. How to create a navigation list using the
sprite image
• The following code shows the creation of navigation list
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}
#home{left:0px;width:46px;}
#home{background:url('img_navsprites.gif') 0 0;}
#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites.gif') -47px 0;}
#next{left:129px;width:43px;}
#next{background:url('img_navsprites.gif') -91px 0;}
7. How to add hover effect using image sprites
• The following lines of code can be used to add
hover effect
#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -
45px;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -
45px;}
8. Contact Info
PSD to HTML Wordpress
www.psd2htmlwordpress.com
Y8,Block EP,Sec – v
Salt Lake, Kol – 700091,India
PH : +913340200838
Email:info@psd2htmlwordpress.com
