How to Create a Background Image in Blogger?

Adding a background image to a blogsite is one way to enhance its appearance. It helps the site to look attractive and unique. Blogger did not provide a menu or button to easily add our own images, however, there are other ways to apply this in our blogsites.

Here are the steps.

1. Select the image that you want to add as a background in your site. The usual size for a background image is 1024 (width) x 768 (height) and in a jpeg format.

2. Copy the url or the direct link of the image (ex. http: //imageshack.us/image.jp). If you want to use your own picture, you need to upload it first to free file hosting websites, like imageshack, photobucket, tinypic and imageboo.

3. Go to your Blogger account - Dashboard - Layout - Edit HTML and click 'Expand Template Widget'.

4. Find the code below.

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

5. Change the code above with the new code below.

body {
background-image: $bgcolor;
background:#fff url("http://img72.imageshack.us/img72/1516/pen4bg.jpg");
background-position: top-left;
background-repeat: no-repeat;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

6. Save the template and view your blog.

That's all! You have already created a background image in Blogger / Blogspot.


Note:

1. For background-position, you can choose other options such as center, right, left, bottom, top, top-right, etc.

2. For background-repeat, you can choose other options such as repeat, repeat-x and repeat-y.