Berikut ini kita akan pelajari senjata ampuh para pemilik profil Friendster yang suka mengganti-ganti gambar latar (background) profilnya. Dengan apa mereka melakukannya? CSS

Catatan: Seluruh contoh di bawah ini akan aku aplikasikan ke tag
<div> berukuran 100 x 100, walaupun seharusnya yang diutak-atik oleh profil Friendster adalah tag
<body>. Tapi, kode aku berikan untuk tag
<body>. Selain itu, ganti seluruh URL gambar dengan gambar kesukaan sendiri, karena aku yakin nggak semua orang punya gambar yang sama.
background-imageInilah tersangka utama yang bisa mengubah-ubah gambar latar kita

Tinggal isi value-nya dengan format
url(url_gambar_kita). Masih ingat ya dengan URL relatif dan absolut?
Contoh! Sori aku lagi nggak ada gambar lain, jadi contohnya pakai ini aja yah

Andaikan aku mau pakai gambar ini sebagai gambar latar:

(ukurannya hanya 64 x 64, disengaja untuk ilustrasi berikut)
Kodenya:
<body style="background-image:url(masseffect_shephard64x64.jpg);"></body>
Hasilnya:
Kalau-kalau ada yang ngintip source halaman ini, mungkin ada yang bingung. Gambar kok URL-nya seperti ini:
http://forum.rpgfantasy.web.id/index.php?action=dlattach;attach=32;type=avatar Mana gambarnya? Well, menggunakan bahasa pemrograman sisi-server (server-side programming), kita bisa saja membuat halaman yang mengeluarkan gambar. Ini nanti akan dibahas di topik lebih lanjut
Buat Web Yuk! (PHP + MySQL).
Hmm... kalau gambarnya lebih kecil dari ukuran elemen yang dikasih gambar latar, ternyata dia otomatis mengulang diri sendiri. Gimana kalau aku ingin gambarnya nggak berulang? Atau hanya berulang ke satu arah saja?
background-repeatProperti ini mengatur perulangan gambar kita. Kita bisa atur apakah gambar kita akan
repeat (diulang ke segala arah),
repeat-x (diulang ke arah sumbu x saja, i.e. kiri-kanan saja),
repeat-y (diulang ke arah sumbu y saja, i.e. atas-bawah saja), atau
no-repeat (tidak diulang sama sekali).
Untuk ilustrasi properti ini, kita harus gabungkan dengan satu properti lagi untuk melihat efeknya.
background-positionNah, andai saja kita ingin mengatur posisi awal gambar latar kita, tinggal atur properti ini. Mau di
top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, atau pada koordinat tertentu
xpos ypos atau
x% y%.
Untuk 9 posisi pertama tadi, andaikan hanya satu kata pertama saja yang digunakan, CSS akan otomatis menggunakan
center untuk posisi berikutnya. Kalau tidak digunakan, nilai yang digunakan adalah
top left alias
0% 0%.
Untuk posisi
x% y%,
x% menunjukkan posisi
horizontal, relatif terhadap elemen yang diberi gambar latar. Misal ukurannya 100px dan aku memberikan 5% untuk
x%, maka posisi sesungguhnya gambar itu ada di 5px. Sementara itu,
y% menunjukkan posisi
vertikal, relatif terhadap elemen yang diberi gambar latar. Posisi
0% 0% sama dengan
top left sedangkan posisi
100% 100% ada di
bottom right. Kalau hanya nilai pertama yang diberikan, nilai kedua otomatis diisi
50%.
Untuk posisi
xpos ypos, ini mudah sekali karena mirip dengan sumbu Cartesius biasa, hanya saja
0 0 ada di kiri atas (
top left) dan y ke bawah bernilai positif. Kalau nilai pertama tidak diberikan, nilai kedua akan diisi
50%. Baik
xpos dan
ypos bisa diisi dengan
unit, termasuk %.
Nah, sekarang kita bisa coba berbagai variasi pengaturan
background-repeat. Semua contoh di bawah ini menggunakan gambar yang sama dengan di atas, dengan elemen
<div> berukuran lebih besar, yaitu 192 x 192 (persis 3 x 3 lebih besar dari ukuran gambar latar). Kalian silakan coba saja di
<body> 
Kita coba otak-atik perulangannya dulu.
<body style="background-image:url(masseffect_shephard64x64.jpg); background-position:top left; background-repeat:repeat;"></body>
Hasilnya:
Yang ini:
<body style="background-image:url(masseffect_shephard64x64.jpg); background-position:top left; background-repeat:repeat-x;"></body>
akan menghasilkan:
Terlihat kan, dia hanya diulang ke arah samping? Bisa ya coba sendiri untuk
repeat-y 
Kalau tidak diulang seperti ini:
<body style="background-image:url(masseffect_shephard64x64.jpg); background-position:top left; background-repeat:no-repeat;"></body>
jadinya ya...
Nah, coba gambarnya kupindah ke... tengah-tengah:
<body style="background-image:url(masseffect_shephard64x64.jpg); background-position:center center; background-repeat:no-repeat;"></body>
Jadinya:
Oke deh, kali ini giliran
repeat-y...
<body style="background-image:url(masseffect_shephard64x64.jpg); background-position:center center; background-repeat:repeat-y;"></body>
Hasilnya:
Tujuh posisi lainnya bisa dicoba-coba sendiri
background-colorAndaikan gambar kita ternyata lebih kecil dari ukuran elemen, kan terlihat ada sisa elemen yang berwarna putih (default). Kalau terlihat jelek atau tidak cocok, warna putih itu bisa diganti ke warna lain menggunakan properti ini. Masih ingat ya tentang
warna?
Contoh! Kalau aku ingin mengisi area yang kosong dari DIV-ku (yang ukurannya tetap 192 x 192 dan gambarnya kuletakkan di tengah-tengah tanpa perulangan) dengan warna hitam, kodenya seperti ini:
<body style="background-image:url(masseffect_shephard64x64.jpg); background-position:center center; background-repeat:no-repeat; background-color:black;"></body>
Hasilnya:
Properti ini sebaiknya disiapkan dengan nilai warna yang dominan dari warna gambar latar, andaikan saja tiba-tiba terjadi sesuatu pada gambar latar (hilang).
background-attachmentPernah lihat halaman yang cukup panjang sehingga kita harus menggulir halamannya ke bawah, tapi gambar latarnya tidak ikut bergerak? Pembuat halamannya menggunakan properti ini, yang diset ke
fixed agar gambarnya tidak bergerak. Jika diabaikan, nilai dasarnya adalah
scroll, yang berarti gambarnya ikut bergerak. Contohnya lihat saja di
situs RPGFWID, itu menggunakan properti ini yang diset ke
fixed.
backgroundKalau tidak ingin repot-repot menggunakan semua properti di atas, kita bisa menggunakan shorthand
background, dengan urutan
background-color background-image background-repeat background-attachment background-position. Tidak semua harus digunakan.
Selesai! Untuk pencinta Friendster, seluruh variasi sudah diberikan di sini untuk mengkustomisasi profil. Tapi, artikel ini belum selesai di sini. Perjalanan kita masih belum berakhir! Berikutnya, aku akan berikan cara untuk membuat tepian (border) seperti yang sudah tampak pada contoh-contoh di atas.