Wednesday, July 21, 2010

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.

14 comments:

  1. pastinya menarik kalo background dipajang foto, tapi ane malu sudah lanjut usia hhh
    ijin nyerap ilmu ya

    ReplyDelete
  2. Kunjungan tengah malam..

    Wah wah... kereen!! tapi aku ga ahli otak atik HTML, takut malah jadi kacau balau semua. So, aku coba ngeblog tuk nulis-nulis aja ukhti, hehehe

    btw, terima kasih banyak banner kerennya ya, senenng banget deh, tapi aku belum ambil, masih bingung mau letak dimana, hehehehe... Arigato gozaimatsu!!! Ganbatte!!! ^_^

    ReplyDelete
  3. aku copy artikelnya Ummi, mungkin nanti kalo ada gambar bagus bisa ganti BG pake scriptnya, trims :)

    ReplyDelete
  4. foto anak kecil yang jadi background itu sapa? anaknya umi ega yah? atau umi ega sewaktu masih kecil?

    ReplyDelete
  5. Bagus triknya nih.
    aku ambil scriptnya, kapan2 aku coba.
    makasih.. :-)

    ReplyDelete
  6. @Pakies, pakai foto yang sekarang aja pa Sis, bagus kok. @Nyayu, Wakatta. @Numberone n Akoey, silahkan. @om John, itu foto Megami, anak saya.

    ReplyDelete
  7. ada gambar cewek imut yang canggihnya Lho, hehehe...

    ReplyDelete
  8. gambarnya harus di sesusaikan dulu ga...ukurannya

    ReplyDelete
  9. @Johan, coba ukuran besar gimana hasil, dan ukuran kecil gimana juga hasilnya, nanti bisa diutak atik sendiri.

    ReplyDelete
  10. udah di coba...lumayan sihh....tulisannya ada yang ga kelihatan... warna tulisan hampir sama dengan warna background

    ReplyDelete
  11. terimakasih buat sharing ilmunya, jadi tahu sekarang... ")

    ReplyDelete