CSS/CSS3 Tutorial: Using single image for different backgrounds

Hello Friends! I am gonna talk about some of the CSS tricks. Actually this trick is on CSS3, Use of a single image (sprite image) to make different backgrounds.

This tutorial has some simple steps like as follows

Create an html element which can represent a block like div, span etc. Now add a class or id attribute to that element.

Let's take div elements to create Facebook and twitter icons.

<div>
  <div class="icon_place"></div>
  <div class="icon_place"></div>
</div>

Here above divs of class icon_place will create space around the icon; icon class will create box and facebook and twitter classes will make their respective icons.

Now in style tag add following CSS

.icon_place {
  display: inline-block;
  width: auto;
  height: auto;
  padding: 3px ;
  background-color: #eee;
  border-radius: 2px;
  border: 1px solid #aaa;
  margin: 5px;
}

.icon_place:hover {
  background-color: #ddd;
  border: 1px solid #555;
  box-shadow: 0px 0px 5px #ccc;
}

.icon_place:hover .icon{
  background-color: #ddd;
}
.icon{
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: #eee;
}

.icon:hover{
  background-color: #ddd;
}

.facebook{
  background-image: url('sprite_icon.png');
  background-repeat: no-repeat;
  background-position: 0px 0px;
} 

.twitter{
  background-image: url('sprite_icon.png');
  background-repeat: no-repeat;
  background-position: -30px 0px;
}

Here’s the explanation of above CSS

border This object of CSS3 creates border of width 1px and of solid style and its colour is #eee as specified above.

border-radius It creates rounded corners on border of specified radius. You can also specify the radius if every corner separately in form of syntax:

border-radius: topright(px) bottomright(px) bottomleft(px) topright(px);

background-color it specifies the colour for the background.

background-image it specifies the image to be used as the background.

background-repeat it specifies that whether to repeat the same image to cover whole background or not. If yes the in X or Y or BOTH.

background-position it specifies the position of background image used. It accepts string values like top, topleft, center etc. numerical values with units like px, %, cm, em etc.

Now the interesting part is that CSS3 allows to set multiple backgrounds to be set and applied in the sequential manner of the order in which written and order in which classes are applied. So first background color is being set and then background image is being set.

Now to create separate icons from sprite image background-position comes in handy. It allows to place the image on background like an absolutely positioned html element on an html page.

So we make our viewable frame small to the size of the single icon in image and move the background image by positive and negative values of background-position.

The facebook icon in sprite image spans from 0px to 30px in X direction and after that from 30px to 60px the twitter icon.

So for facebook icon background-position has value 0px 0px.

And for twitter icon background-position has value -30px 0px. Coz we have to shift the image to left by 30px and done so by -30px. The next 0px specifies position in Y axis.

And the property display with value inline-block specified width and height properties. makes html element visible though element does not contain any content.

And see we are ready with the icons using a single sprite image.

Demo Download

Go on and make some nice and UX rich apps using this trick.

Please share your views about this artile in comments.