Warning:
This CSS tutorial is based on my experience. I am not going to be responsible for any damages on your site due to any mistakes in this tutorial. Please comment on any mistakes, alternatives or improvements regarding the content of the tutorial.

How to use only one single image for different headings? Instead of using normal words, some people like to use images as the heading on their sidebar. For example ‘The author’, ‘ Recent Comments’ and so on. Take a look on my sidebar for example. Right-click on the heading and choose ‘view background image’ and you can see a single image with different headings.

Let say you want to have 4 headings on your sidebar. Create something like this:

We are going to use classes for the headings. Let say you want to use this technique in your sidebar, so open up your sidebar.php file and use this simple code for the heading:

<div class="heading1"> </div>

* you can also use <h2 class> or any others.

make sure you place the code correctly - before the content of that particular section.

Now lets work on the CSS part of the technique. Open your style.css file and put these lines:

.heading1 {
background : url(images/headings.jpg) no-repeat center 0%;
background-position : 0 -6px;
height : 30px;
}
.heading2 {
background : url(images/headings.jpg) no-repeat;
background-position : 0 -30px;
height : 30px;
}
.heading3 {
background : url(images/headings.jpg) no-repeat;
background-position : 0 -60px;
height : 30px;
}
.heading4 {
background : url(images/headings.jpg) no-repeat;
background-position : 0 -133px;
height : 30px;
}

For the CSS, you need to modify the value for background-position based on the size of your heading. It is basically the position of your heading on the image you created earlier.

Consider this excerpt:

background : url(images/headings.jpg) no-repeat center 0%;
background-position : 0 -6px;
height : 30px;

it means that the background has a 30px height - positioned 0px from the left and -6px from top. We can say that Heading 1 is located at -6px on the Y-axis of the image - as illustrated below.

So the same thing goes with the other headings. Just change the positions until you get the best view of the headings.
Alternatively, you can simplify the CSS into this :
background:transparent url(images/h_side.jpg) no-repeat scroll 0pt -6px;

Well, I dont really know whats the advantage of using this method. But it sure does reduce the number of files you need for your theme.

Be creative. You can also use this technique for the navigation bar - like the one I am using up there.
Good luck!