Contoh
Mengatur background-image untuk <body> elemen:
body
{
background-image: url("paper.gif");
background-color: #cccccc;
}
Cobalah sendiri " Lebih "Try it Yourself" contoh di bawah ini.
Definisi dan Penggunaan
Properti background-image menetapkan satu atau lebih gambar latar belakang untuk elemen.
Latar belakang dari suatu unsur adalah ukuran total elemen, termasuk padding dan perbatasan (but not the margin) .
Secara default, latar belakang-gambar ditempatkan di sudut kiri atas unsur, dan diulang baik secara vertikal dan horizontal.
Tip: Selalu mengatur latar belakang warna yang akan digunakan jika gambar tidak tersedia.
| nilai default: | none |
|---|---|
| mewarisi: | no |
| animatable: | no. Read about animatable |
| Versi: | CSS1 + new values in CSS3 |
| sintaks JavaScript: | object .style.backgroundImage="url(smiley.gif)" Try it |
Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
| Milik | |||||
|---|---|---|---|---|---|
| background-image | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Note: IE8 dan sebelumnya tidak mendukung beberapa gambar latar belakang pada satu elemen.
CSS Syntax
background-image:url|none|initial|inherit;Nilai properti
| Nilai | Deskripsi |
|---|---|
| url(' URL ') | URL untuk gambar. Untuk menentukan lebih dari satu gambar, memisahkan URL dengan koma |
| none | Tidak ada gambar latar belakang akan ditampilkan. Ini adalah default |
| initial | Set properti ini ke nilai default. Baca tentang awal |
| inherit | Mewarisi properti ini dari elemen induknya. Baca tentang mewarisi |
Contoh lebih
Contoh
Menetapkan beberapa gambar latar belakang untuk <body> elemen:
body {
background-image: url("img_tree.gif"),
url("img_flwr.gif");
background-color: #cccccc;
}
Cobalah sendiri " Pages terkait
CSS tutorial: CSS Background
CSS3 tutorial: Backgrounds CSS3
Referensi HTML DOM: backgroundImage property