Adding Background Image to Post Titles


Dcloud Of Dcblog brought this fantastic thing to us.By this we can put a Image Just behing the Post Title like on his blog.It’s Very Simple,the only thing is that you need to have a superb image to put on their.

You will have to just check hard for the codes to implement as different blogger have different type of coding.

To locate the code which controls the post titles go to your Layout Tab (located in your Customize window) and click the Edit HTML sub tab. The code you are searching for is “.post h6″ (it can be something else also,So try searching) which looks like this

Now to get the background image in there you have to add the code “background: url()” like this:

.post h6
{
font-size:22px;
color:#000000;
font-weight:normal;
border-top:1px dotted #000000;
padding:4px 0 0 0;
width:599px;
no-repeat;
background: url(http://www.yourserver.com/yourimage.gif) no-repeat;
}

Now Check your blog the image might be partially visible only so add the height attribute(equivalent to the height of the image).

.post h6
{
font-size:22px;
color:#000000;
font-weight:normal;
border-top:1px dotted #000000;
padding:4px 0 0 0;
width:599px;
no-repeat;
background: url(http://www.yourserver.com/yourimage.gif) no-repeat;
}
height: 80px;

Now Checkout your blog,now you have to add/change the padding codes as you thinkl according to your blog to properly align the title within the image.

0 comments: