27 June 2007

Background Style

Seperti halnya desktop anda, element dari suatu halaman website dapat dipercantik dengan cara memodifikasi background atau latar belakang yang ada. Bisa menggunakan warna tertentu ataupun gambar yang anda inginkan. Namun bila gambar yang anda pilih, konsekuensinya adalah waktu load akan semakin lama. Perlu diketahui, secara standar di beberapa browser, element yang tidak diatur latar belakangnya akan memiliki background yang transparan. Coba anda perhatikan kode-kode dibawah ini untuk mempelajari penggunaan background.


<html>

<head>

<style>

body {

background-color: #000;

background-image: url(images/css.gif);

background-repeat: repeat-x;

background-attachment: fixed;

}



.box {

background: #fff url(images/killua3.jpg) repeat-x scroll;

height: 100px;

width: 100px;

}

</style>

</head>

<body>

<center>

<div class="box"></div>

</center>

</body>

</html>

Langsung saja pada bagian pertama atau pada bagian style untuk body, disitu tertulis background-color: #000, yang berarti halaman itu memiliki background berwarna hitam, nilai #000 juga bisa ditulis dengan "black". Lalu background-image: url(..) dan background-repeat: repeat-x, berarti halaman akan memiliki background berupa file gambar css.gif yang diulang-ulang secara horizontal. Sedangkan background-attachment: fixed; berarti background gambar tadi akan diam meskipun halamannya digulung.

Nilai dari masing-masing element tadi masih bisa anda ubah sesuka anda, seperti repeat-y dan no-repeat untuk background-repeat dan scroll untuk background-attachment. Keempat kode-kode tadi (color, image, repeat, & attachment) bisa anda gabungkan dalam satu kode seperti yang digunakan pada element .box. Perhatikan gambar berikut untuk menganalisa kesalahan yang ada.



Apa anda sudah mengetahui kesalahan yang ada, ya element box yang ada ditengah-tengah halaman seharusnya memiliki background berupa gambar killua3.jpg yang ada di direktori images. Hal itu terjadi karena ketika halaman itu dibuka, browser tidak menemukan file killua3.jpg tadi, maka yang ditampilkan hanyalah element box yang memiliki latar belakang berwarna putih. Karena kotak .box masih memiliki background cadangan yaitu #fff, maka seperti itulah hasilnya. Seperti yang dijelaskan diatas, bila tidak ada angka hexa tadi (#fff) maka .box akan memiliki background transparan.

Sebenarnya ada satu kode CSS lagi yang berhubungan dengan background, yaitu background-position, yang bisa diisi dengan "top left", "top center", "top right", dan seterusnya. Kode ini berguna untuk menentukan posisi awal dari gambar latar belakang suatu elemen terhadap element itu sendiri. Jadi bila nilai "top right" yang diberikan, maka gambar latar akan berada di sudut kanan atas dari element tersebut.

No comments:

Post a Comment