How do I…

… add a (seamless) background image to my blog?

Guide to install a background image
Make sure you have saved your background graphic to a place like Photobucket.com or Flickr.com. Get the URL for inserting it in your blog´s code. Don´t worry - Photobucket and Flickr will automatically generate the code for you.

NOTE: When generating the URL from one of these services, use the URL (direct link) only, not the full HTML code.

Tips for background graphics:

• You want your background to be the background. You do not want it to hinder your reader´s ability to read your posts. It should not distract your readers, it should blend seamlessly into your design.
• Most background graphics are a smaller graphic repeated across the page (done automatically by the browser). This means you should choose a graphic that is small and has an easily repeatable pattern or no pattern at all. Some examples:

1. Host the small image on any photo host
2. Add your Photo host url of the icon to the following code below

1. Log in to your Blogger account.
2. Click on “Edit Template”
3. Click on the “Edit HTML” link on the Template tab.
4. Find the code, like:

body {
margin:0;
padding:0;
background:#483521 url(”http://www.blogblog.com/scribe/bg.gif”) repeat;
}

The part that says

background:#483521 url(”http://www.blogblog.com/scribe/bg.gif”) repeat;

is the part that we want to change. The number you see (#483521) is telling the browser what color to make the background in case the background image doesn’t load. The part that says

url(”http://www.blogblog.com/scribe/bg.gif”) repeat

is telling the browser which image to use as the background for your blog template and to repeat that image across and down the page. To change the background image, we have to change which graphic it is referencing.

5. To change the color, simply type the new numbers that represent the color you´d like in place of #483521.
6. To change the background graphic, use the new background´s URL. Replace http://www.blogblog.com/scribe/bg.gif. Make sure the new URL has quotes around it and is inside the parentheses.

For example, your finished code might look like this:

background:#FFFFFF url(“http://i252.photobucket.com/albums/hh5/PYB-freebies/290208/seamless-flowers.jpg”) repeat;

Congrats! You have now customized your template!