Properti Background adalah untuk membuat efek latar belakang pada sebuah element.
Ada beberapa macam properti pada Background sebagai berikut:
- Background Color, berfungsi untuk mengatur latarbelakang sebuah element dengan warna solid.
Contoh:
h1 {background-color:#FFFFFF;}
- Background Image, berfungsi untuk mengatur latarbelakang sebuah element dengan gambar.
Contoh:
h1 {background-image: url(nama-gambar.gif);}
- Background Repeat, berfungsi untuk mengatur latarbelakang sebuah element dengan gambar yang dapat diulang atau tidak.
Contoh:
h1 {background-image: url(nama-gambar.gif);
background-repeat: no-repeat;}
selain bernilai no-repeat juga dapat bernilai inherit, repeat, repeat-x dan repeat-y.
cobalah satu persatu untuk melihat efek yang terjadi!.
- Background Attachment, berfungsi untuk mengatur latarbelakang sebuah element dengan gambar, apakah dapat digulirkan atau tidak.
Contoh:
h1 {background-image: url(nama-gambar.gif);
background-attachment: fixed;}
selain bernilai fixed juga dapat bernilai inherit dan scroll
cobalah satu persatu untuk melihat efek yang terjadi!.
- Background Position, berfungsi untuk mengatur letak/posisi gambar latarbelakang sebuah element.
Contoh:
h1 {background-image: url(nama-gambar.gif);
background-repeat: no-repeat;
background-position: top;}
selain bernilai top juga dapat bernilai inherit, center, left, right, dan bottom
cobalah satu persatu untuk melihat efek yang terjadi!.
- Background, berfungsi untuk mendeklarasikan semua background properti menjadi satu. Cara ini paling banyak digunakan oleh web designer karena dapat mempersingkat waktu kerja anda.
Contoh:
h1 {background:#FFFFFF url(nama-gambar.gif) no-repeat left top;}
