Figure: Blogger Template Designer
New blogger templates are slightly different from the older templates. In the older templates, you would change the background in the Edit HTML section of your template, under the body {
However, with the new templates, you can change it from the template designer. To change to your own custom background, follow these steps below.
Design > Template Designer > Advanced > Add CSS
Once you are in “Add CSS”, you would 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.
Below is the explanation of 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)
After you are done with the code, it 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; } |
(Please note that some newer blogger templates may have conflicting elements that may cause the background not working as you wanted).
Here are a few below that I noticed you need to differ from the instructions. If you are using one of these templates 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 can also use two different images for a custom design. However, to get a single image to display correctly, you must follow the steps accordingly.
(If you have any question, refer to "Help" tab).
