Belajar CSS Membangun Background

Beberapa properti yang digunakan untuk menentukan efek latar belakang sebuah elemen

background-color
background-image
background-repeat
background-position
background-attachment

background-color digunakan untuk menentukan warna latar belakang. Properti ini mempunya tiga macam nilai pilihan

color name = nama warna “red”
color rgb = nilai rgb “rgb(225,0,0)”
color hex = nilai hex “#ff0000“

body {background-color:#ff0000;}

background-image digunakan untuk menentukan efek latar belakang menggunakan sebuah gambar. Properti ini mempunyai dua pilihan

url(URL) = alamat gambar
none = tidak ada gambar

body {background-image:url(bg.png);}

background-repeat digunakan untuk menentukan gambar ingin set mengulang atau tidak mengulang.
Properti ini mempunyai beberapa nilai pilihan

repeat = gambar mengulang vertikal dan horisontal
repeat-x = gambar mengulang horisontal
repeat-y = gambar mengulang vertical
no-repeat = gambar tidak mengulang

body {
background-color:#ff0000;
background-image:url(bg.png);
background-repeat:repeat-y;
}

background-position digunakan untuk menentukan posisi gambar. Properti ini mempunyai beberapa nilai pilihan

left top = gambar ada di kiri atas
left center = gambar ada di kiri tengah
left bottom = gambar ada di kiri bawah
right top = gambar ada di kanan atas
right center = gambar ada di kiri tengah
right bottom = gambar ada di kiri bawah
center top = gambar ada di tengah atas
center center = gambar ada di tengah tengah
center bottom = gambar ada di tengah bawah
%x %y = persen bisa juga di gantikan angka : 15px 100%

body {
background-color:#ff0000;
background-image:url(bg.png);
background-repeat:repeat-y;
background-position:left top;
}

background-attachment digunakan untuk menentukan gambar ingin di set menggulung atau masih tetap. Properti ini mempunyai dua pilihan

scroll = gambar ikut menggulung ketika halaman di gulung
fixed = gambar masih tetap ketika halaman digulung

body {
background-color:#ff0000;
background-image:url(bg.png);
background-repeat:repeat-y;
background-position:left top;
background-attachment:fixed;
}

Nilai-nilai dari properti di atas juga bisa dikumpulkan dalam satu deklarasi menggunakan properti background:

body {background:#ff0000 url(bg.png) left top repeat-y fixed;}

Catatan:
Jika nilai dari background-repeat tidak diset maka nilai repeat yang berfungsi.
Jika nilai dari background-position tidak diset maka nilai left top yang berfungsi.
Jika nilai dari background-attachment tidak diset maka nilai scroll yang berfungsi.

CATEGORY : CSS Basic TAG : belajar, code, css, dasar, desain, standar at Friday, 8 October, 2010