How to Change Blogger Background Picture-Background Page

Posted by Unknown 0 comments
How to change blogger background image/picture ?How to change blogger background color ?How to change blogger background HTML ?

If you are stuck with these sort of questions then,Here is another creamy post about changing blogger page background .

First, go to your Edit HTML Template page.

Dashboard > Layout > Edit HTML

Then look for the body { ... } section, usually appear after the Variable Definitions.don't go for HTML <body> tag.

body {
background:$bgcolor; margin:0;
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size: small; text-align:
center; 
}

It doesn't have to look exactly like that. As long as you found the "body { }" section.



Now to change the background, all you need to do is play around with the background: line.

 How to change the colour of the background?


background: #FFFFFF;

Just change the #FFFFFF to other hexadecimal colour value. #FFFFFF is white. For more colours, check them out  here hexadecimal colours.

Also, you can put the color name if you want.

background: white;


However, for more variety of colours, you are recommended to use the hexadecimal colour code.

How to put image as background?

Add Background Image:
First upload your background to the Internet - ImageShack, Photobucket or any of your favourite photo uploading sites. Then obtain the direct link to the picture.

background: url(LINK);
Just add the image URL in place of LINK and you're done. Also you can modify the positioning and location of the image.

Just add these code after the URL part.

1.Repeat the image horizontally (left to right):

repeat-x 

 2.Repeat the image vertically (top to bottom):

repeat-y 

3.No image repeat:

no-repeat 

4.Repeat both vertically and horizontally:

(don't put any "repeat" tag) 

5.Position image to the left or right:

left (for left side)
or
right (for right side) 

6.Position image to center of screen:

center 

7.Fix image on background (to prevent image from moving when scrolling):

fixed


Now your complete background code may look like this:

background: #FFFFFF url(http://abc.com/image.jpg) repeat-x fixed;

Note: Dont forget to put " ;" at the end of the statement.This is the silly big mistake we usually do and pull our hair for hours :)
Please do share and comment if you like the post.Please contact or comment your question for any queries.