Background - Belajar CSS

Menjelaskan mengenai kegunaan properti background pada CSS serta nilai-nilai (values) yang dapat dimasukan pada tiap-tiap propertinya. Setelah mempelajari properti background diharapkan kita dapat mengedit properti background sesuai dengan yang kita kehendaki.

Properti Background adalah untuk membuat efek latar belakang pada sebuah element. Properties CSS yang dapat digunakan dalam efek background diantaranya:

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

Background-Color: berfungsi untuk mengatur latar belakang 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;}