Ini yakni penerapan CSS dasar untuk properti background. Saya harap kalian sanggup cepat mengerti. Sebagai materi praktek, Saya buat sebuah blog sederhana dengan background yang sangat miskin menyerupai ini:
Dalam tampilan tersebut tampak sebuah blog dengan latar belakang hijau. Untuk mengganti warna latar belakang, terkadang sebuah template sudah dilengkapi dengan variabel-variabel yang nantinya akan ditampilkan dalam halaman Perancang Template. Dari daerah itu kau sanggup dengan gampang memilih warna latar belakang hanya dengan sekali klik:
<Variable name="bgcolor" description="Page Background Color" type="color" default="#fff" value="#ffffff"> Tapi bagaimana kalau templatemu ternyata tidak mempunyai variabel tersebut? Satu-satunya jalan hanyalah dengan mengubah background secara manual, yaitu melalui halaman Edit HTML.
Untuk mengganti warna latar belakang melalui halaman Edit HTML, carilah sebuah grup arahan yang tampak kurang lebih menyerupai ini:
body { margin:0; padding:0; border:0; text-align:center; color:$mainTextColor; background:#692 url(http://www.blogblog.com/moto_son/outerwrap.gif) top center repeat-y; font-size:small; }Tidak usah pedulikan arahan apa saja yang ada di dalamnya, cukup fokus pada selektor body {} dan properti background.
Coba perhatikan arahan ini:
#692yakni warna background (aslinya#669922tapi arahan warnanya diringkas menjadi tiga digit angka).url(http://www.blogblog.com/moto_son/outerwrap.gif)yakni background image berupa kepingan gambar yang kalau ditampilkan akan terlihat menyerupai ini (klik!)
Untuk menampilkan sebuah background image, caranya cukup dengan mengakses URL gambar tersebut.top centeryakni posisi background. Dalam posisi horizontal (sumbu-X), background image tersebut ditempatkan rata atas atau top, sementara dalam posisi vertikal (sumbu-Y), background image tersebut ditempatkan rata tengah.repeat-ymengatakan bahwa background tersebut akan diduplikasi secara vertikal mengikuti sumbu-Y. Cara ini dipakai untuk mengurangi besar gambar yang umumnya diterapkan dalam background image berupa gradient atau pattern.
Oke, kini kita mulai prakteknya. Kita tahu bahwa arahan #692 merupakan warna hijau dalam blog kita. Jika kita ganti arahan warna tersebut dengan #882222 misalnya, maka jadinya akan menjadi menyerupai ini:
Sekarang kita coba untuk mengganti background imagenya. Ganti URL gambarnya dengan URL ini: http://2.bp.blogspot.com/-l0z0zMqI2_E/TgvtSDKcsoI/AAAAAAAAAVQ/YzrI83Qjcio/s1600/arsip.jpg kemudian ganti arahan repeat-y dengan repeat saja, sehingga background image akan diduplikasikan ke sumbu-X dan sumbu-Y menyerupai ini:
Itu yakni sedikit cara untuk mengganti background image secara manual. Dan ingat, background image tersebut secara eksklusif diterapkan dalam latar belakang blog alasannya yakni yang tadi kita utak-atik yakni format-format model yang berada di dalam selektor body {}. Jika kalian menerapkan praktek ini dalam selektor #outer-wrapper {} misalnya, maka kau akan mendapat hasil menyerupai ini:
Saya mulai menulis tutorial CSS ini alasannya yakni hari ini Saya mendapati seorang pembaca yang mengira bahwa template Saya ini yakni template hasil unduhan atau membeli dari sebuah situs. Padahal Saya mendesain template ini dengan memanfaatkan kerangka dari template Rounders bawaan dari Blogger.
Jika dilihat-lihat, memang masih tampak menyerupai kan?
