These instructions are revised from Tips for New Bloggers

 

Adding a Background Image to a Blogger Template

With thiese steps, you can add a background image or picture to your Blog, customize the position of your image, and have a static background image that stays in place when you scroll through the contents of your blog.

Create a picture that is about 900 pixels in width and about 1200 pixels in height. Upload it to your Patherfile host. Make sure it is in the public folder and take note of its FULL URL. .

Log in to your dashboard layout; under Template, choose-> Edit HTML, scroll to where you see this:-

body {
background:$bgcolor;


To change the background color:

If you would like to change the background color of your blog, you can manually specify the color value. Take a look at the HTML Color Chart to see if you can find your desired color. For example, if you have chosen a color code #B38481, change the above code to this:-

body {
background-color:#B38481;


Add a background image

Insert the below code instead of the above code for the background color: -

body {
background-image: url(URL address of your image);


Remember to insert the URL address of your image in the brackets.

Repeat 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 may choose not to have the image repeated. If that is the case, you can insert this code:-

background-repeat: no-repeat;


Alternatively, you may only want the image to be repeated horizontally. The code is this:-

background-repeat: repeat-x;


To have the image repeated vertically, the code is this:-

background-repeat: repeat-y;


Position background image

If you have an image that is not repeated, you may like to specify the exact position of this image on your page. The HTML code to be inserted is this:-

background-position: top left;


Your 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

After that, you may specify whether you want your 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 have it stay put, the code to insert is this:-

background-attachment: fixed;


Putting it all together

The eventual HTML code that you will have for your customized template may look like this:-

body {
background-color:#B38481;
background-image: url(http:// YOUR_ BACKGROUND_PICTURE.jpg);
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 this:-

body {
background:#B38481 url(http:// YOUR_ BACKGROUND_PICTURE.jpg)

no-repeat center center fixed;