How To Change Background Template Designer With Your Own Image

In Layout then Edit HTML, find this code :

.body-fauxcolumn-outer {
background: $(body.background);
}

Change with this first code :

.body-fauxcolumn-outer {
background: url(http://your image); }
.body-fauxcolumn-outer div {
background: none;

Then Save Template and View Blog. The result will be like this ( sample my blog ) :

The second code :
Change the first code with this :

.body-fauxcolumn-outer {
background: url(http://your image);
background-position: center;
background-size: 100%;
background-repeat:
no-repeat; background-attachment: fixed; }
.body-fauxcolumn-outer div {
background: none;
}

Then Save Template and View Blog. The result will be like this :

See the post background. This transparent color isn't like at the first code. Then I tried to look for the solution. You can see here Freedom to bark and in the Forum.

Finally, I found the solution. See the image background like this, especially at the post background :

Almost similar with the second code but different at the post background. Here is the secret. The code still use the second :

.body-fauxcolumn-outer {

background: url(http://your image);

background-position: center;

background-size: 100%;

background-repeat:

no-repeat; background-attachment: fixed; }

.body-fauxcolumn-outer div {

background: none;

}

then find still in Edit HTML this code :


.main-outer {
background: $(main.background);

Change like this :


.main-outer {
background: transparent);

Now, as usual Save Template and View Blog. As you see, I did it. It worked.
Remember, when you do this, please check from other browsers because it usually has different look.