New Template Backgrounds (Blogger)

The new templates are a bit different from the older ones. In the older templates you would change the background in the Edit HTML section of your template, under the body {.
Now with the new templates you can change it though the template designer.

To change to your own custom background you need to go to.
Design> Template Designer> Advanced> Add CSS

Once you are in there you will place a code like this below.

.body-fauxcolumn-outer {
background: url(http://www.example.com/image.png)PV RV;
background-attachment: AV;
}
.body-fauxcolumn-outer div {
background: none;
}

RED: This is the image URL.
BLUE: This is the positioning variable.
ORANGE: This is the repeat variable.
GREEN: This is the attachment 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 element (In this case it is your whole 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)


Now after your done the code may look like this below.

.body-fauxcolumn-outer {
background: url(http://www.example.com/image.png)top center repeat-x;
background-attachment: fixed;
}
.body-fauxcolumn-outer div {
background: none;
}

Note: some newer templates may have conflicting elements that may cause the background to not work as planed.

Here are a few below that I noticed you need to differ from the instructions.  If you are using one of these template you may have to place the codes below.

Watermark 3 Template:  (grassy background image)

.main-cap-top .cap-left {
background: none;
}
.main-outer {
background: none;
}
body {
background: none;
}
.main-cap-top .cap-right{
background: none;
}
.body-fauxcolumn-outer {
background: url(http://www.example.com/image.png) PV RV;
background-attachment: AV;
}

Simple Template and  Watermark Template:

body {
background: url(http://www.example.com/image.png) PV RV;
background-attachment: fixed;
}
.body-fauxcolumn-outer .cap-top {
background: url(http://www.example.com/image.png) PV RV;
background-attachment: fixed;
}

The positioning variables and Repeat variables must be the same for both. The attachment must be  set to fixed.   You don't have to follow this and you can use 2 different images for a custom design. However this is what I had to do to get a single image to display correctly.