Adding a background Image to the Title of post

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

post h3

( 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( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiphQG8iJHCo8tOW4fTX7Cu0cc7pLMy6xNwSuiUd33GcuuFJKYyfkSkefY61Tf8tOIWwsJJqN4ax3EXtWq0zmEdKenXR-v-Oc1X1luRhJzCY8GTr0cg1dyPfnY5LJjcTYA7NCnx4VxicPPd/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.


Now follow the Safety Saving Steps.

And



Some Header Images for youImage URL :- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFpDLVR8DwfhgtQ4P_lr5DY_dJtSuhcw-cEOwKJnDe721xpSKfmuANaDy0_wmpj36UOdbVyWSXwCjUxR_jhbilErRdMK2cnTPmBxCyKj2RqEpsgPL5-VllQ6XxwRLWca8ESJllfhj3MEBN/s1600/bg_sb_title.jpg



Image URL :- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiphQG8iJHCo8tOW4fTX7Cu0cc7pLMy6xNwSuiUd33GcuuFJKYyfkSkefY61Tf8tOIWwsJJqN4ax3EXtWq0zmEdKenXR-v-Oc1X1luRhJzCY8GTr0cg1dyPfnY5LJjcTYA7NCnx4VxicPPd/s1600/sidebar-h.jpg

Image URL :- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjhVWwGXR1dghFgtk72bfmQ_r70HRXGkOQDZVxKFqXdaoRCUG4kWwfYp_XqbeDrGGbo7wK0xcYVbPs4ZrVZ_A_HCL0q3tqE6XvLlq-hYFJh3xsurH_17wgMev2Zs_NRhLfF0s1UFCvuQrQ/s1600/bg_sb1_g.gif

Image URL :- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgPXLAGxxCjYCTgUWwWj5h91n_whCQ4FirGuez4HphV6ekWisuFFO8GMDGbbMUDR9NpAL9SkMfcMHGKYMY4kp5Rj_bnJQR_I76BbL8xnJCZDQUeqSSYw_Pjah17A54McygM2dJju3cmYY/s1600/bg_sb1.jpg

Background

• Adding a Background Image

post top

Images

• Adding Social Bookmark buttons
• Adding a Side bar header image to a Imageless Side bar header