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:

view sourceprint?

1	body {background: ColorCode url(YourImageUrl) no-repeat centerfixed;}

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!