CSS Image Sprites

Image Sprites

An picture sprite is an accumulation of pictures put into a solitary image.

A website page with numerous pictures can set aside a long opportunity to stack and produces numerous server requests.

Using picture sprites will diminish the quantity of server demands and spare bandwidth.

Image Sprites - Simple Example

Instead of utilizing three separate pictures, we utilize this single picture ("img_navsprites.gif"):

navigation pictures

With CSS, we can demonstrate only the piece of the picture we need.

In the accompanying model the CSS indicates which part of the "img_navsprites.gif" picture to show:


#home {
    width: 50px;
    stature: 52px;
    foundation: url(img_navsprites.gif) 0 0;
Try it yourself »

Example explained:

  • <img id="home" src="img_trans.gif"> - Only characterizes a little straightforward picture since the src property can't be vacant. The showed picture will be the foundation picture we indicate in CSS
  • width: 50px; stature: 52px; - Defines the segment of the picture we need to use
  • background: url(img_navsprites.gif) 0 0; - Defines the foundation picture and its position (left 0px, top 0px)

This is the most straightforward approach to utilize picture sprites, presently we need to extend it by utilizing joins and float effects.

Image Sprites - Create a Navigation List

We need to utilize the sprite picture ("img_navsprites.gif") to make a route list.

We will utilize a HTML list, since it very well may be a connection and furthermore bolsters a foundation image:


#navlist {
    position: relative;

#navlist li {
    edge: 0;
    cushioning: 0;
    list-style: none;
    position: absolute;
    top: 0;

#navlist li, #navlist a {
    tallness: 52px;
    show: block;

#home {
    left: 0px;
    width: 50px;
    foundation: url('img_navsprites.gif') 0 0;

#prev {
    left: 70px;
    width: 50px;
    foundation: url('img_navsprites.gif') - 46px 0;

#next {
    left: 135px;
    width: 50px;
    foundation: url('img_navsprites.gif') - 91px 0;
Try it yourself »

Example explained:

  • #navlist {position:relative;} - position is set to in respect to permit total situating inside it
  • #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - edge and cushioning is set to 0, list-style is expelled, and all rundown things are total positioned
  • #navlist li, #navlist a {height:52px;display:block;} - the tallness of all the pictures are 52px

Now begin to position and style for every particular part:

  • #home {left:0px;width:50px;} - Positioned the whole distance to one side, and the width of the picture is 50px
  • #home {background:url(img_navsprites.gif) 0 0;} - Characterizes the foundation picture and its position (left 0px, top 0px)
  • #prev {left:70px;width:50px;} - Positioned 70px to the right (#home width 50px + some additional room among things), and the width is 50px.
  • #prev {background:url('img_navsprites.gif') - 46px 0;} - Defines the foundation picture 47px to one side (#home width 50px + 1px line divider)
  • #next {left:135px;width:50px;}-Positioned 135px to the right (beginning of #prev is 70px + #prev width 50px + additional room), and the width is 50px.
  • #next {background:url('img_navsprites.gif') - 91px 0;} - Characterizes the foundation picture 91px to one side (#home width 50px + 1px line divider + #prev width 50px + 1px line divider )

Image Sprites - Hover Effect

Now we need to add a drift impact to our route list.

Our new picture ("img_navsprites_hover.gif") contains three route pictures furthermore, three pictures to use for drift effects:

navigation pictures

Because this is one single picture, and not six separate records, there will be no stacking delay when a client floats over the image.

We just add three lines of code to include the float effect:


#home a:hover {
    foundation: url('img_navsprites_hover.gif') 0 - 42px;

#prev a:hover {
    foundation: url('img_navsprites_hover.gif') - 46px - 42px;

#next a:hover {
    foundation: url('img_navsprites_hover.gif') - 91px - 42px;
Try it yourself »

Example explained:

  • #home a:hover {background: straightforward url('img_navsprites_hover.gif') 0 - 42px;} - For each of the three drift pictures we indicate a similar foundation position, only 45px further down

Welookups is optimized for learning.Copy right 2018 - 2019 kumar aditya singh .
All Right Reserved and you agree to have read and accepted our term and condition.
All Rights Reserved. .