How to make a picture as a background

Update: With the new Template Designer, it is now very easy to add or change background for your blog. Sign into Blogger.com

Dashboard > Template Designer > Background

and there you can change your background color or image at will without having to directly edit the template.

The first thing you have to do is to choose an image where the color of the image and the text of the blog are compatible and the color doesn't clash. Otherwise the text will be very difficult to read. Another thing is the size of the image. If the image size does not fit the whole background, it will normally repeat itself unless you choose not to do so (see last part of post). If it repeat itself, to make the background pleasant, you will have to ensure the repeated images merge properly. For my demo blog Self Improvements, I chose a cloudy sky with white and light blue as they merge into each other well while the black text on the light background will still be clearly readable.

When you have selected your image and have stored it in your computer, then to make the picture as a background, you first have to post the picture on the web somewhere or host the picture with a photo host like Photobucket. Refer to "Getting Blogger to host your pictures for the profile, etc." if you want Blogger to host the image. Get the url (example http://photo-url.jpg) of the picture, then sign into Dashboard, select the blog, click TEMPLATE tab, and look for this block of CSS code in the template. It will be somewhere in the beginning of the template:

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

Then add this line of code
background-image:url("URL of photo");
to the above, as shown below (added code in red)

body {
background:#fff;
background-image:url("URL of photo");
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}

replacing URL of photo with the real url of the picture, for example
http://photos1.blogger.com/blogger/5611/753/1600/sky-19.0.jpg

If you don't want the image to repeat in the background, all you have to do is to add another line to the code: background-repeat:no-repeat;

So your CSS code become:

body {
background:#fff;
background-image:url("http://photos1.blogger.com/blogger/5611/753/1600/sky-19.0.jpg");
background-repeat:no-repeat;
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}

NEWER POST

OLDER POST