Background Image for Blogger Template

With this guide, you will be able to
1. add a background image or picture to entire blog or to the posts only or to your sidebar only.
2. add a static background image that stays in place when you scroll through the contents of your blog.
3. customize the position of your image.

All you need to have is an image readily hosted in some image-hosting websites like flickr, picasa or any picture that you'll find on the net(googling).
Goto your image hosting site and take note of the picture URL.
Next, log in to your Dashboard click Layout and click Edit HTML, and search for the following code in the code window;
body {
background:$bgcolor;

and add the following code;
body {
background-image: url(URL address of your image);

Remember to insert the URL address of your image in the brackets.
Insert the URL of your image in the above brackets and Click Preview to see the feel of your blog.
If you like the page feel, save the template.

Background for sidebar:
You can also have a background image just for your sidebar. Locate the following code-snippet and add the background image code accordingly.
#sidebar-wrapper {

#sidebar-wrapper {
background-image: url(URL address of your image);

Background for posts:
For a background image to your main post body only, find the code-snippet #main-wrapper { and add the background-image code like the way I've done below;

#main-wrapper {
background-image: url(URL address of your image);

Repeating background image:
By default, the image is repeated to fill up the entire background of the page. If you have a small or tile-sized image, it will appear like a print pattern in the background. Sometimes, you dont want to have the image repeated. In such cases add the following code snippet in the place where you have added the above mentioned code;
background-repeat: no-repeat;

Alternatively, to repeat the image horizontally. The code is;
background-repeat: repeat-x;

To repeat the image vertically, the code is;
background-repeat: repeat-y;

Positioning background image:
If you dont want your image to be repeated and you want to specify the exact position of this image on your page, the code that to be inserted is;
background-position: top left;

The image will appear at the top left corner of your page. The other possible values that you can use to replace 'top left' are;
top center;
top right;
center left;
center center;
center right;
bottom left;
bottom center;
bottom right;

If you do not want it entirely left, right or center, you can also define the horizontal and vertical alignments either in percentage or in pixels. Use either of these values instead, with x being the horizontal value and y being the vertical value.
x% y%;
xpx ypx;

Static background image:
You can also make the background image to remain in a fixed position when the contents of your blog are scrolled. By default, the picture scrolls with your content. To make image pinned down while your text scrolls, the code you have to add is;
background-attachment: fixed;


Putting everything together
The final code that you will have for your customized template after altering according to this guide would look like;
body {
background-image: url(image url);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;

You can also combine the attributes into one line and the shorthand code will look like;
body {
background: url(image url) no-repeat center center fixed;