home

Css3 Sprites

Sprite is very important options in css. Mainly in the large application and any website, an application may have to use images - icons so instead of using individual (single) images in every time, you can convert all images as a single image then based on image position (measurement) we have ensured the image path with a position.

Why css sprite (sprite images)

Do you understand really what's is sprite it is really quite difficult to understand, but no problem, I have given the simple example about the sprite.

Sprite simple html example

This is an example code of sprite, here we have couple of div tags, with different classes and the first div having the "left-arrow" class and second remain div has the "right-arrow" class. and also we have some simple understandable css which is having sprite properties(css sprite properties like background url and position), first left arrow has image along with positions(0px 0px) and other one has different image positions(-91px 0px).

<div class="left-arrow"></div>
<div class="right-arrow"></div>

Sprite image css

.left-arrow{
   width:50%;
   float:left;
   height:50px;
   background:url(img.gif) 0px 0px;
   }
.left-arrow{
   width:50%;
   float:right;
   height:50px;
   background:url(img1.gif) -91px 0px;
   }