Adding Background Image.

You can add your own custom background to Blogger. However this works with the older templates not the newer designer templates.

First think you need to do it figure out what image you want to use. You can upload a image to file share sites such as Imageshack. I recommend Imageshack over Photobucket. The reason being is Photobucket has troubles displaying larger images correctly.

You will need to go to Design > Edit HTML from your Dashboard. Once your there you need to decide what you want to add a background image to.
Now you can add a background image to many sections of your blog. Here are a few below.

This will add a image on the outside section of your blog.

body {

This will add a image or banner to the header section.

#header-wrapper {

This will add a image to the inside sections of your blog. (Sidebars and Main)

#content-wrapper {

These will add image to sidebar(s).

#sidebar-wrapper {

#left-sidebar-wrapper {

This will add a image to the inside center of your blog.

#main-wrapper {

Once you have decided on what section you want a background to display in
you will need to place a this code just below the wrapper.

background: url(http://imagehost.com/yourimage.jpg) RV AV PV;

RED: This is the image URL.
BLUE: This is the repeat variable.
ORANGE: This is the attachment variable.
GREEN: This is the positioning variable.

Now I will explain the variables and their purpose.

Positioning Variables (PV):

This is the image position in relation to the center of the screen. you can use any one of these variables below.

* top left
* top center
* top right
* center left
* center center
* center right
* bottom left
* bottom center
* bottom right

Repeat Variables (RV):

This is how the image repeats itself.

*repeat (Repeats Y and X also known as tiled)
*repeat-x (Repeats Horizontal)
*repeat-y (Repeats Vertical)
*no-repeat (No repeat)


Attachment Variables (AV):

This will control if the image moves with the screen when your scroll or stays in place.

*fixed (Stays in place)
*scroll (Scrolls with screen)

Positioning Variables (PV):

This is the image position in relation to the center of the screen. you can use any one of these variables below.

* top left
* top center
* top right
* center left
* center center
* center right
* bottom left
* bottom center
* bottom right

Now after you have put everything together it may look something like this below.

body {
background: url(http://img808.imageshack.us/img808/3568/1480matrixbgreversemodi.jpg) no-repeat fixed center center;
margin: 0;
padding: 0px;
font: x-small Verdana, Arial;
text-align: center;
color: $textColor;
font-size/* */:/**/small;
font-size: /**/small;
}