Thursday, December 27, 2012

Adding a background Image to the Title of post

If you like , you also can add a background image to your post title's background. The most amazing thing is the resolution. Though you use a short small Image as the background image to your post title's background , it will re sized and posted repeatedly. So better to use a Pattern as the background image.

To do this

1. Edit your Template

2. Now find out press 'Ctrl' + F to open your browser's search box

Now you will find out several post h3 code lines but use the first post h3You will see bunch of code lines which are very similar to these

.post h3 {
color:#3E3533; ------------ Post title's color
font-size:20px; ------------ Post title's size

font-weight:bold; --------- Post title's font decoration

line-height:1.4em;
margin:0.25em 0 0;

Now paste this code line just after the code line .post h3 {


background: url( Paste URL of your Image here ) top repeat-x;

ex:-

.post h3 {

background: url( http://1.bp.blogspot.com/_wa6zL1GRiOs/SdjrkNXWBYI/AAAAAAAACio/MP2Dh1GqvCs/s1600/sidebar-h.jpg ) top repeat-x;

color:#3E3533;

font-size:20px;

*keep in remember , above code lines will be in a different way according to the template you are using.


And

Some Header Images for you Image URL :- http://2.bp.blogspot.com/_XByc9SCisZM/Segw7tvdsHI/AAAAAAAACHI/iC2CtxXG1gI/s1600/bg_sb_title.jpg

http://1.bp.blogspot.com/_wa6zL1GRiOs/SdjrkNXWBYI/AAAAAAAACio/MP2Dh1GqvCs/s1600/sidebar-h.jpg

Image URL :- http://1.bp.blogspot.com/_wa6zL1GRiOs/SdjrkNXWBYI/AAAAAAAACio/MP2Dh1GqvCs/s1600/sidebar-h.jpghttp://4.bp.blogspot.com/_XByc9SCisZM/ScH7SRnT2qI/AAAAAAAABlE/E0A3QBmSKYc/s1600/bg_sb1_g.gif

Image URL :- http://4.bp.blogspot.com/_XByc9SCisZM/ScH7SRnT2qI/AAAAAAAABlE/E0A3QBmSKYc/s1600/bg_sb1_g.gifhttp://2.bp.blogspot.com/_XByc9SCisZM/SbIMdJZNoRI/AAAAAAAABKM/i1iLQZEWRIc/s1600/bg_sb1.jpg

Image URL :- http://2.bp.blogspot.com/_XByc9SCisZM/SbIMdJZNoRI/AAAAAAAABKM/i1iLQZEWRIc/s1600/bg_sb1.jpg

0 comments:

Post a Comment