Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Image Sprites in CSS

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 195
    Comment on it

    Image sprites is a collection of different images in a single image. image sprites can can be used in html page for showing different images seperately and help us to increase our image loading time. Any Web page with multiple images generates the multiple server calls by which it takes more time to load images in the web page .This process make the page load slow mostly it can have problems in slow internet connections.

    Image sprites solve this problem.

    Example for the image attached with this post.

    We can show the images by using image spirites by using the code given below

    #computers {
        width: 100px;
        height: 90px;
        background: url (image url) 0 0;
    }
    #dress image {
        width: 100px;
        height: 90px;
        background: url(image url) -290px 0;
    }
    #furnitures image {
        width: 100px;
        height: 90px;
        background: url(image url) -340px 0;
    }
    

    Like we have a image sprites like bellow, which contain eight images in a single file name bigsprite.png:

    Image Sprites in CSS

 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: