Template Designer: How to use your own background image

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:

   body {background: ColorCode url(YourImageUrl) no-repeat center fixed;} 
   .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 

1. Go to Design > Template Designer > Background and click the dropdown button under Background Image heading.
2. Click Upload Image button on top left corner of the pop up.
3. 
   
4. Click Browse button and select an image from your computer. If you want a full-screen background, use an image that's 1800 pixels wide and 1600 pixels high. The image file size must 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!

Template Designer: How to use your own background image