How To Add Picture Background (blogger)

Adding background in blogger is so easy. This tutorial is for new blogger and for anyone who need it ;p.Just follow the easy step in below ^^,


1. 1st upload the picture/background image in photo hosting .You can upload your background at free photo hosting,e.g photobucket,imageshack, Googlepages and many more..

2. Login to Blogger,>> Layouts >> Edit HTML ( before you start editing your blog pls backup your template 1st/download full template)

3. Now,you need to locate the ‘body’ CSS , like below:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

To add an image here you have to add the code in below before the '}' at the end :

background-image:url(WEB URL OF YOUR PICTURE );
background-repeat:no-repeat;
background-position:120% 10%;
background-attachment: scroll;

It will look like this:

body {
background:$bgcolor;
background-image:url(PUT-IMAGE-URL);
background-repeat:no-repeat;
background-position:120% 10%;
background-attachment: scroll;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

4. Change the (PUT-IMAGE-URL) with your image url from the photo hosting/see step 1.

If you want to change the horizontal and vertical you background image,change the (120%)-horizontal and (10%) is vertical.Negative percentages will move the image up or to the left, in relation to the containing element. The repeat attribute controls tiling. If instead of 'no-repeat' you add 'repeat-x' it will tile horizontally and 'repeat-y' will tile it vertically. The scroll attribute means your picture moves along with the text when you scroll up or down. If you want the picture to remain fixed while your text scrolls past it or over it when you use it as a background then change 'scroll' to 'fixed'.

Save Your Template And Try View You Blog..