Friday, 13 June 2014

How to add background image to all blogger post content area


We can add custom images to blogger background and even for posts and side bar. But, if we apply a background image to a blog inside main-wrapper, then the image will be applied to the whole post including post title and footer. this will be useful in some case.

But, if you need to add background image only to blog post content area, then  there are two ways.

How to 1:


In every post, manually go to html tab and add a new div inside first div. Don't forget to close the div in the last. Now you can add image to this div using img tag and this will act as a background image for blogger post content area.

This is very useful if we want to put background images to posts separately. But, what if we need to put same background image to all posts ? then this is an extra work to manually add additional div to every post.

So, we can use option 2

How to 2 :

If you need to apply same background image to all posts, then you can add it in the template itself.

To apply image for whole post area, add below code inside "main-wrapper" :


background:url(IMAGE-URL) repeat top right;


If you need background only to post content area, then add this line of code to ".post-body "


Save template and refresh your blog.
That's all.
Bingo !!

No comments:

Post a Comment