Blogpowered: Blogger Hacks: Adding background image to sidebar titles

If you have already read my post about putting background color on your sidebar - Adding background color to sidebar, You may also want to put a background image on sidebar titles that will blend to your header image or your template in whole. This technique will make your sidebar titles more readable and recognizable.

So here's how to do it. :D

1. First is to make your own image which measures 200px wide and 100px in height.
(I recommend Photoshop for doing this but if you dont have this software, you may want to download a software similar to Photoshop - Gimp )

Samples:
1.Gradient Effect
2.Solid Color

2.Upload it in your hosting website of your choice.(Photobucket(Recommended), Imageshack and etc)

3.Locate this line in your edit html box.

.sidebar h2 {
background:
url(http://bp3.blogger.com/_xn2gmPb9TfM/R5SF7ODdQbI/AAAAAAAAA
wY/NR6uYhiytks/s320/sidebar _bg.gif) no-repeat center left;
margin:0;
padding:.2em 0;
}

4. Be sure to replace the URL i posted above with your background image.
Note:The statement “no-repeat center left” ensures that the background image appears only to the left of the heading, and does not repeat across the whole width.