Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • What is image sprite and its uses in CSS?

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 290
    Comment on it
    • CSS image sprite is a single image like a image-sheet with all the images needed for your website.

    • Image sprites is having all the images needed at one place in a single image to it makes the browser work easy while the browser try to find the image path and hence the image get loaded easily.

    • It lowers the number of HTTP requests needed in a webpage to the server which makes the page to be loaded fastly.

    • Actually HTTP requests are done in sequence i.e one request will not start until the previous one is completed,due to which opening a connection to do a request is expensive. So to reduce the amount of requests made on the server and increase the speed of the elements to be loaded we use sprite image.

    • Image sprites can also makes images swapping dynamically.

    • It can be coded inline via style attributes.

    • It gives image roll over effect a faster transition because the Hover image is already loaded into the browser it only needs to be shifted in background-position.

    Example: Please see the example below to know about the implementation of image sprite.

    HTML:

    <!DOCTYPE html>
    <html>
    <head>    
    </head>
    <body>
    <div class="bird1"></div>
    <div class="bird2"></div>
    <div class="bird3"></div>
    <div class="bird4"></div>
    </body>
    </html>
    

    CSS:

    .bird1
          {
           background: rgba(0, 0, 0, 0) url("img/angrybirds.png") repeat scroll -1px -7px;
           height: 119px;
           width: 113px;
          }
    .bird2
          {
           background: rgba(0, 0, 0, 0) url("img/angrybirds.png") repeat scroll 180px -7px;
           height: 105px;
           width: 105px;
          }
    .bird3
          {
           background: rgba(0, 0, 0, 0) url("img/angrybirds.png") repeat scroll 210px -96px;
           height: 112px;
           padding-left: 21px;
           width: 119px;
          }
    .bird4
          {
        background: rgba(0, 0, 0, 0) url("img/angrybirds.png") repeat scroll 305px 112px;
            height: 95px;
            width: 97px;
          }
    

    Note: Changing the css property of a list item on hover "perform" a little faster since we only need to change the x,y instead of the whole src.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: