how to use css sprites? [closed]


Tags: css,sprite

Problem :

I read somewhere that css sprites are better than using simple images. How is that ? also I am new to Html so can anyone tell me how css works and give me a simple example for css sprites?



Solution :

Here is the complete code, Copy paste in a notepad and save as abc.html and save two images below in the same folder as the same name: image.gif for big one and trans.gif for small one.

<html>
<head><title>Image Sprites</title>
 <style type="text/css">
 img.sprite
{
width:46px;
height:44px;
background:url(image.gif) 0px 0px;
}        

.sprite:hover{background: url(image.gif) 0px 44px;}
</style>
</head>

<body>

<img class="sprite" src="trans.gif" />

</body>
</html>

enter image description here enter image description here

In simple words Css sprites uses only one image instead of many. So instead of many image requests from server only one request is sent.


    CSS Howto..

    How to prevent css keyframe animation to run on page load?

    Bootstrap - How to ensure white space on far left and far right on mobile

    how to define css to get the simple tabbed menu

    Slideshow Glitch - Debugging Assistance

    How would I go about having placeholder divs that are then “overwritten” later with PHP?

    How to change the width of dynamically generated list boxes, based on user input?

    How to keep a navbar toggle open until selection is made

    How to snap divs together vertically in CSS like Pinterest have

    How to put the footer at the bottom of the visible page?

    How to create folder style in CSS

    How to add styles based on whether top element is empty

    how to style this form by css (mailchimp)

    How to define specific CSS rules for IE9 alone?

    How to mix two image using clipping in css?

    How to separate image folder and css folder to work with eachother in maven project

    How to force IE to place two div boxes next to each other in it's browser window?

    How do I align something in a in the top-left corner - without aligning everything?

    ASP.NET - How to include CSS only if it isn't alrealy included?

    How to target multiple table rows with a single CSS rule?

    How to start with responsive deisgn [closed]

    How to convert template from table to div

    How to make a thicker text shadow using css?

    how to make unorder list all in same block and have gap within each link (CSS)

    How to set css via jquery for preventing some action

    how to add css for div tag

    How to put gradient on top of background image but below text

    How to add text using css in textarea? [closed]

    How to define exceptions for the Third occurence of a DIV?

    How to remove the gap between each list-item in an unordered list?

    How to add a class to only one div on click?