Membuat Background Statis

1/01/2013

Sekarang gue akan berbagi ilmu kecil yang barusan gue dapet dari googling, yaitu cara ubah background ke mode statis, tau nggak statis nggak? HAHA!! perbandingannya sih gini, blog gue sebelumnya background pake wooden floor yang mengikuti scroll bar, sekarang gue ganti background yang lebih kece dikit dan diam tidak bergerak hehe.. Jadi kesimpulannya backround statis itu background yang tidak ikut bergerak jika lu memutar scrool pada halaman blog atau bisa dikatakan juga Background yang diam.

langsung saja caranya yaitu dengan cari css body background lo di template, bingung? yaudah.. ini caranya detailnya..


1. Pastinya anda Login Blog Anda
2. Jika lu menggunakan tampilan lama klik Design > Edit HTML, sedangkan jika lu pake tampilan yang baru pilih Template > Edit HTML
3. Jangan lupa mencentang Expand Widget Templates
4. Lalu cari kode body {background dengan menekan Ctrl+F

biasanya akan menemukan kode dibawah ini, jika tidak lu coba ubah dengan cari  kode body { lalu cari yang di sampingnya atau dibawahnya ada kode background karena tidak semua template memiliki susunan code yang sama. oke gue anggap lu ngerti dn menemukan kode seperti dibawah ini

body {background: url("http://i1113.photobucket.com/albums/k505/anggita_bayu/blog/background-1_zps4953b317.gif");
background-repeat: repeat;
background-position: center top;

nah setelah kode diatas letakkan kode berikut background-attachment: fixed;

jadi kode tadi menjadi.... 
body {background: url("http://i1113.photobucket.com/albums/k505/anggita_bayu/blog/background-1_zps4953b317.gif");
background-repeat: repeat;
background-position: center top;

background-attachment: fixed;

NB: Warna Pink  itu diisi dengan link url background kamu, bisa lu upload di photobucket atau yang lain.

kalau udah coba liat hasil dengan klik tombol pratinjau buat ngetes hasilnya ada error apa enggak, kalau sudah benar nggak ada error ya langsung save aja. Kalau misal ada error seperti background jadi tumpuk-umpuk coba tambahkan

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
jadi nanti kode akan menjadi

body {background: url("http://i1113.photobucket.com/albums/k505/anggita_bayu/blog/background-1_zps4953b317.gif");
background-repeat: repeat;
background-position: center top;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
kalau udah coba liat hasil dengan klik tombol pratinjau buat ngetes hasilnya apakah masih ada error atau enggak. seharusnya sih udah beres hehehe.. Kalau beres ya langsung SAVE, kalau masih aja error yaudah Close aja kosongkan hasil edit HAHAHA!!

Kalau ada yang ditanyakan silahkan comment dibawah ini ya, selama gue bisa bantu ya akan gue bantu hehehehe

You Might Also Like

0 Komentar

"Baca tanpa komentar itu kurang lengkap seperti hati orang jomblo" :p

Jadi berkomentarlah bebas, Kritik dan saran sangat diperlukan. Asal gak SARA dan jangan ANONIM yak, nggak usah ngasih link blog, pasti dibuka kok blog kamu :))