Blogger Templates Layouts Tutorials | Web Page Design Tutorials Home

How to Add Background Color or Image to Blogger Body

If you don't like the default Blogger white background body, you can add a background color or add a background image easily by editing the body property of the HTML code.

Let's take a look at the original CSS Style Code of Blogger Body:

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

Add Background Color to Blogger Blog Body

You can add or set a background color to Blogger body by adding a background-color property to the body tag. For example:

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

The Dreamweaver screen should look like:

Blogger Body Background Color

Add Background Image to Blogger Blog Body

To add a background image to Blogger body, use the background-image property.

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
background-image: url(images/body-bg-color.gif);
}

Note:
use the following code instead in your blogger:

background-image: url(http://www.YourImageLoc.comimages/body-bg-color.gif);

The final result of your Blogger will look like:

Blogger Body Background Color

This tutorial shows how to add background color and background image to Blogger blog.

blogger layout tutorials