Add the Uploaded Image as Blog Background.

I'm assuming that you've uploaded your image and you've the address/URL of your uploaded image. Now go to Designthen Template Designer. From the left column select Advanced and then chose Write CSS. You can click the following image for help:

In the box there, we can add our custom CSS code. So, you need to add the following code in that white box:

body { background: url(URL of Image you uploaded in step 2); background-color: none; }
.body-fauxcolumn-outer div { background: none !important; }

If you're using a pattern then the above code will work great. However, if you're using a big image then you need to take care of the alignment as well. The code for an image will be something like this:

body { background: url(URL of Image you uploaded in step 2) no-repeat scroll top left; background-color: none; }
.body-fauxcolumn-outer div { background: none !important; }

There are 4 things in the code above, let me introduce them to you.


1- no-repeat
It makes sure that the large image doesn't repeat itself. You can change it to repeat if you want to repeat your background image.


2- scroll
You might have noticed that the background image also moves when you scroll down your blog. If you want the background image to stay still in the background then you can change scroll to fixed.


3- top
Top is indicating the vertical positioning of the background image. You can change the vertical positioning to center orbottom.


4- left
Left is responsible for horizontal positioning of your background image. You can also change this value to center or right.

Final Thoughts

I've tried my best to make the HTML and CSS stuff easy for you guys. however, if you still feel any difficulty, feel free to leave me a comment. You can also refer to an official tutorial provided by Google about adding custom CSS in Template Designer.