Template Designer: How To Use Your Own Background Image

Update 
September 2010: The image upload function is now available in regular Blogger. Jump to the tutorial now. 
August 2010: You can now upload your own image, via Blogger In Draft.

The new Blogger Template Designer offers hundreds of beautiful background images to choose from, yet it does not provide an option to upload your own image.

So how do you go about using your own image as a background? The answer is using CSS. You can use your own image by adding a CSS background code snippet. The good thing is, with Template Designer you don’t have to go to Design > Edit HTML to add the snippet. It can be done from within the Template Designer itself.

(If you are applying your own background to a regular Layout Template, read Using image as background).

Here are the steps,

1. Upload your background image to an image host such as Picasa, Flickr or Photobucket. Make sure the file size does not exceed 250kB. Once uploaded, get the direct link to the image.
2. Login to your Blogger account.
3. Go to Dashboard > Design > Template Designer.
4. In Blogger Template Designer page click Advanced. Then scroll down the submenu and click Add CSS. 
   
5. Enter the following code in the CSS editor window:
   view sourceprint?

   1	body {background: ColorCode url(YourImageUrl) no-repeatcenter fixed;}

   2	.body-fauxcolumns .fauxcolumn-outer div, .body-fauxcolumn-outer .cap-top .cap-left {background:none;}

   • Replace ColorCode with the color code of the prevailing color of your image.
   • Replace YourImageUrl with a direct link to the image.
   • For a repeated, tiled image effect, remove no-repeat from  code line 1.
6. Hit Enter key and the changes you make will be shown instantly in the live preview beneath the editor. 
   
7. If you like the result, click the orange Apply to Blog button to save.
8. That’s it. Enjoy!

Uploading your own background image via Blogger In Draft

(added August 2010)

1. Switch to Blogger In Draft.
2. Go to Design > Template Designer > Background and click the dropdown button under Background Image heading.
3. Click Upload Image button on top left corner of the pop up. 
   
4. Click Browse button and select an image from your computer. If you want a full-screen background, use a large image: 1800 px wide and 1600 px high or greater. However, make sure the image’s file size does not exceed 300kB.
5. Once the image is displayed (uploaded), click Done.
6. Set the background’s alignment, tiling and scrolling. 
   
7. Click the orange Apply To Blog button when you’re done.
8. That’s it, enjoy!