How To Add A Background Image Behind Your Blogger Posts

In this latest blog i will show you how to use an image in the background of your blog posts.This background image will only be behind the post area of your blog.

This is part 3 of 3 on adding background images to your blog recently i posted:

1.How To Use A Background Image For Your Blog

2.How To Add A Background Image To Your Blogger Sidebars

Be careful selecting an image to put behind your posts you don't want an image that makes your blog hard to read.You can find images on image hosting websites like Photobucket.


Once you choose your image here's how to add it to your blog:

1.Click 'Layout'-->'Edit html' For your blog

2.Find the following piece of code in your blogs html:
(Click'CTRL F' on your keyboard for a search box to help find code)

#main-wrapper {

You will see ' #main-wrapper { 'Followed by code similar to this :


#main-wrapper {
float: left;
width: 486px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


3.Now add the following code Directly Below ' #main-wrapper { '


background:url(PUT IMAGE URL HERE) repeat top right;
/* background-attachment: fixed; */


4.Replace the text 'PUT IMAGE URL HERE' above with the URL of your image.

We Are Nearly Finished : If you need more help or have an opinion or suggestion Please leave a comment Below.This is a Do-Follow Blog.

Example:


#main-wrapper {
background:url(http://i941.photobucket.com/albums/ad259/spiceupyourblog/bloggerbackground.jpg) repeat top right;
/* background-attachment: fixed; */
float: left;
width: 486px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


Once you have added the code click save and your finished adding the image.

What do you think ?