Pengenalan properti CSS (background)

Properti CSS adalah syntax yang diperlukan untuk memanipulasi selector yang kita inginkan.Untuk mengetahui apa itu selector,properti dan value baca dulu: Apa itu CSS .

Nah berikut  properti CSS yang umum dipakai (dasar) dalam penggunaan properti “background”

background

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

Contoh penerapan

body{
background-color: white;
background-image: url(http://gambarku.com/image.jpg);
background-position: center;
background-repeat: repeat-x;
background-attachment: fixed;
}

Maksudnya  kita memakai warna latar belakang seluruh bagian blog kita (body) dengan warna putih dan menggunakan latar berupa gambar juga .Gambar tersebut  diulang menyamping (horisontal) dan berada ditengah,sekaligus  bersifat tetap (fixed) ketika halaman blog di scrool keatas atau bawah.

Karena penulisan syntax diatas terlalu banyak dan menyita waktu,maka bisa juga dipersingkat menjadi seperti berikut.

body{
background: white url(http://gambarku.com/image.jpg) repeat-x  center 30%;
background-attachment: fixed;
}

Kita bisa mengatur value dari properti background-repeat dan background-position untuk menentukan posisi background image sesuai yang kita inginkan.

background-repeat:
repeat : mengulang background gambar  kekanan sekaligus bawah
no-repeat: tidak mengulang background gambar
repeat-x: mengulang background gambar secara horizontal
repeat-y: mengulang background gambar secara vertical

background-position:
center : background gambar ditengah
top      : background gambar berada diatas
bottom:background gambar  berada dibawah
%(persen):background gambar berada berapa persen dari lebar selector

Contoh lain dengan background position
body{
background: white url(http://gambarku.com/image.jpg) no-repeat  center top;
}
Maksudnya,backgaround image tersebut  tidak diulang dan akan berada di paling atas dan  posisinya berada ditengah.

body{
background: white url(http://gambarku.com/image.jpg) no-repeat  center;
}
Maksudnya,backgaround image tersebut tidak diulang dan berada ditengah tengah.

Itulah dasar dari penggunaan syntax CSS untuk properti background,silahkan bereksplorasi untuk mengembangkannya.