How To Change Background Color And Images For Blogger / Blogspot

Change the look of the blog to be more beautiful is fun, because it is necessary for blog customization blog seem more personal and unique. Well one way to make the blog look different from the others is to change the background of the blog.

To change the background color as desired blog, here are the steps:

1. Login to your Blogger Dashboard and select the tab menu Design
2. Choose Edit HTML
3. Then you look for the tag code: body { (use Ctrl + F to find quickly)
     Or you can also find more code / add code after the body { as follows:

body {
background: # ffff;
margin: 0;
padding: 40px 20px;
font: x-small Georgia, Serif;
text-align: center;
color: # 333;
font-size / ** / :/ ** / small;
font-size: / ** / small;
}

Suppose if you want to be a light gray color, so code like this:

body {
background: # E7E3E3;
margin: 0;
padding: 40px 20px;
font: x-small Georgia, Serif;
text-align: center;
color: # 333;
font-size / ** / :/ ** / small;
font-size: / ** / small;
}

1. Click the Preview button to see the changes
2. If it is OK, click the Save Changes button Template
3. Done.

Changing the Default Background Color For Blogger Template:

1. Login to your Blogger dashboard and select the menu Template
2. Select Advanced >> Custumise
3. Select a Page Background Colour 4.Click the color that you like in the color images show, then look at the changes under Template
5.If you feel it is suitable, click SAVE CHANGES
6.Done.

 

To change the background image as desired blog, here are the steps
(Before you change the background image with a new image bakcground, Ensure you found(have) host the background image and his own
1. Sign in to your dashboard and select the tab menu design
2. Choose Edit HTML
3. Then you look for the tag code: body { (use Ctrl + F to find quickly)
     Or you can also find more code / add code after the body { as follows:

body {
background:#ffff url('your image url  address');
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}

4.Change your image url address with the address of the background image that you host.
5. Save the template
Noteworthy is the size of your picture, don’t use images with large byte, try to under 50 Kb, so do not make your blog loading heavy and long. The image has a pixel size different. Verify that your blog is full of background images from left to right and from top to bottom. To create a full background image takes repetition. Use the tag repeat to right / side: repeat-x, and down: repeat-y. Here's an example of repetition to the right / side ::

body{background:url(http://2.bp.blogspot.com/_wnULV7UHiXY/TSOhgPOpqXI/AAAAAAAAAH8/dC7uwZp1HA0/s1600/t28_blue_background.jpg
);background-position:top left;background-repeat: repeat-x;}

that picture is also filled to the bottom (up to page footer), add the repeat-y right beside repeat-x. example:

body{background:url(http://2.bp.blogspot.com/_wnULV7UHiXY/TSOhgPOpqXI/AAAAAAAAAH8/dC7uwZp1HA0/s1600/t28_blue_background.jpg);background-position:top left;background-repeat: repeat-x repeat-y; }

If you do not want your image over and over either to the left or to the bottom, just use the code no-repeat. Example

body{background:url(http://2.bp.blogspot.com/_wnULV7UHiXY/TSOhgPOpqXI/AAAAAAAAAH8/dC7uwZp1HA0/s1600/t28_blue_background.jpg);background-position:top left;background-repeat: ;

Posted in: Blogger Design,Blogger Layouts,Blogger Tutorials