Contoh
Mengatur properti latar belakang yang berbeda dalam satu deklarasi:
body
{
background: #00ff00 url("smiley.gif") no-repeat fixed center;
}
Cobalah sendiri " Definisi dan Penggunaan
Latar belakang properti singkat set semua properti background dalam satu deklarasi.
Sifat-sifat yang dapat diatur, adalah: background-color, background-image, background-position, background-size, background-repeat, background-asal, latar belakang-klip, dan background-attachment.
Tidak masalah jika salah satu nilai di atas yang hilang, misalnya background: # ff0000 url(smiley.gif) ; Diperbolehkan.
| nilai default: | see individual properties |
|---|---|
| mewarisi: | no |
| animatable: | yes, see individual properties . Read about animatable Try it |
| Versi: | CSS1 + new properties in CSS3 |
| sintaks JavaScript: | object .style.background="red url(smiley.gif) top left no-repeat" Try it |
Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
| Milik | |||||
|---|---|---|---|---|---|
| background | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Note: Internet Explorer 8 dan versi sebelumnya tidak mendukung beberapa gambar latar belakang pada satu elemen.
Catatan: Lihat dukungan browser individu untuk setiap nilai di bawah.
CSS Syntax
background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;Catatan: Jika salah satu dari sifat-sifat dalam deklarasi singkat adalah properti bg ukuran, Anda harus menggunakan / (slash) untuk memisahkan dari properti bg-posisi, misalnya background:url(smiley.gif) 10px 20px / 50px 50px ; akan menghasilkan gambar latar belakang, posisi 10 pixel dari kiri, 20 pixel dari atas, dan ukuran gambar akan menjadi 50 piksel lebar dan 50 piksel tinggi.
Catatan: Jika menggunakan beberapa sumber background-image tetapi juga ingin latar belakang warna, parameter background-color perlu terakhir dalam daftar.
Nilai properti
| Nilai | Deskripsi | CSS |
|---|---|---|
| background-color | Menentukan warna background yang akan digunakan | 1 |
| background-image | Menentukan SATU atau LEBIH gambar latar belakang yang akan digunakan | 1 |
| background-position | Menentukan posisi gambar latar belakang | 1 |
| background-size | Menentukan ukuran gambar latar belakang | 3 |
| background-repeat | Menentukan bagaimana untuk mengulang gambar latar belakang | 1 |
| background-origin | Menentukan daerah posisi gambar latar belakang | 3 |
| background-clip | Menentukan daerah lukisan gambar latar belakang | 3 |
| background-attachment | Menentukan apakah gambar latar belakang tetap atau gulungan dengan sisa halaman | 1 |
| awal | Set properti ini ke nilai default. Baca tentang awal | 3 |
| mewarisi | Mewarisi properti ini dari elemen induknya. Baca tentang mewarisi | 2 |
Pages terkait
CSS tutorial: CSS Background
CSS3 tutorial: Backgrounds CSS3
Referensi HTML DOM: background property