How to Add a Background Image in Blogger

Uniqueness is vital to all bloggers, isn't it? And one of the most unique enhancements for Blogger / Blogspot websites is adding custom background image. Adding one might slow the access of the blog a little bit (especially if the background image is too big), but if done correctly, it is worthy of the uniqueness. By default, Blogger / Blogspot does not provide any menu to add our own background image. However, we still can do it another way.

Let’s get to the point, shall we? Here is the technique:

First, we have to prepare the image that is to be used as the background, and a 1024 x 768 jpg file is the most commonly used type. You can use existing image in the web, and what we need is its direct link (to the file). Don’t forget, be careful with its copyright, since you want more uniqueness, not problems.

You can also use your own image (from your computer), but in that case, first, you need to upload the file to a free file hosting website, such as ImageBoo.com . Then you can obtain its direct link, which is needed to set the codes in the next step.

Just in case, direct link is a link that refer directly to the file, not to the page of a website which contains it, such as "http://imageboo.com/example.jpg" not "http://imageboo.com/example.html"

The next step, we need to edit the codes of the template of our blog. It is accessible through dashboard >> layout >> edit HTML. You might also want to un-check “expand template widget” to simplify the appearing codes. Unless they are still not too complicated for you and you want to complicate things a little bit :D

Then, we need to find these bold codes, which are responsible in authorizing the background of all the pages in the blog. They are located in the upper section of the codes, you can use your browser’s searching tool to find them faster (ctrl+f in Mozilla Firefox).

body {
background: #ffffff;
margin: 0;

After finding them, we need to change them into these bold codes:

body {
background:#fff url("direct URL of the image");
background-position: down-left;
background-attachment: fixed;
background-repeat: no-repeat;
margin: 0;

Then save the template, and the background shall be yours.

Codes options:

#123 refers to the background color behind the image, which will be shown when visitors opt not to view any image from their browsers. The format is in three-digits color hexa-codes, meaning that the color white will be represented by "#fff" instead of "#ffffff". You can edit this code to show any color you wish. Actually, you can use either 3-digits or 6-digits hexa-codes for this.

Background-position: down-right; refers to the image’s starting position when rendered, down-right. Another options:

• Background-position: center;
• Background-position: top;
• Background-position: bottom;
• Background-position: left;
• Background-position: right;
• etc

Background-repeat: no-repeat; refers to the setting of no repeated appearance of the image. For example, if you use a 500 x 500 pixels jpg file, you will need to repeat it to cover the whole screen of 1024 x 768 resolutions. Otherwise, it will appear only as a tile somewhere in the screen, not covering the whole screen. Other options (the brackets are not the part of the codes, just for description):

• Background-repeat: repeat; (both horizontal and vertical repeating)
• Background-repeat: repeat-x; (horizontal repeating)
• Background-repeat: repeat-y; (vertical repeating)

Tips: Using both vertical and horizontal repeating is good to adapt to the different resolutions the visitors use.

background-attachment: fixed; refers to the setting not to let your background image be scrolled too when visitors scroll the page up or down. Other option:

• background-attachment: scroll;

Update July 2 2009: Imageboo.com recently deletes files without any cause and I have no idea why. I suggest using photobucket.com , same free but much more reliable.

OK, that's all folks. Any question?