Properti latar belakang gaya
Contoh
Gaya latar belakang dokumen:
document.body.style.background = "#f3f3f3 url('img_tree.png') no-repeat right
top";
Lebih banyak contoh "Coba Sendiri" di bawah ini.
Definisi dan Penggunaan
Properti latar belakang mengatur atau mengembalikan hingga delapan properti latar belakang terpisah, dalam bentuk singkatan.
Dengan properti ini, Anda dapat mengatur/mengembalikan satu atau beberapa hal berikut (dalam urutan apa pun):
- warna latar belakang
- gambar latar belakang
- latar belakang-ulangi
- lampiran-latar belakang
- latar belakang-posisi
- ukuran latar belakang
- latar belakang-asal
- klip latar belakang
Properti di atas juga dapat diatur dengan properti gaya terpisah. Penggunaan properti terpisah sangat disarankan untuk penulis non-lanjutan untuk pengendalian yang lebih baik.
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
| Property | |||||
|---|---|---|---|---|---|
| background | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Catatan: Lihat dukungan browser individual untuk setiap nilai di bawah ini.
Sintaksis
Kembalikan properti latar belakang:
object.style.background
Setel properti latar belakang:
object.style.background = "color image
repeat attachment position size origin clip|initial|inherit"
Nilai properti
| Value | Description |
|---|---|
| color | Sets the background color of an element |
| image | Sets the background image for an element |
| repeat | Sets how a background image will be repeated |
| attachment | Sets whether a background image is fixed or scrolls with the page |
| position | Sets the starting position of a background image |
| size | Sets the size of a background image |
| origin | Sets the background positioning area |
| clip | Sets the painting area of a background image |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Detail Teknis
| Nilai Bawaan: | transparan tidak ada ulangi scroll 0% 0% auto padding-box border-box |
|---|---|
| Nilai Kembali: | Sebuah String, mewakili latar belakang suatu elemen |
| Versi CSS | CSS1 + properti baru di CSS3 |
Lebih Banyak Contoh
Contoh
Ubah latar belakang elemen DIV:
document.getElementById("myDIV").style.background = "url('smiley.gif') blue repeat-x center";
Contoh
Mengatur warna latar belakang untuk dokumen:
document.body.style.backgroundColor = "red";
Contoh
Mengatur gambar latar belakang untuk dokumen:
document.body.style.backgroundImage = "url('img_tree.png')";
Contoh
Setel gambar latar ke no-repeat:
document.body.style.backgroundRepeat = "repeat-y";
Contoh
Atur gambar latar untuk diperbaiki (tidak akan digulir):
document.body.style.backgroundAttachment = "fixed";
Contoh
Ubah posisi gambar latar:
document.body.style.backgroundPosition = "top right";
Contoh
Kembalikan nilai properti latar belakang dokumen:
document.body.style.background;
Halaman Terkait
Tutorial CSS: Latar Belakang CSS
Tutorial CSS3: Latar Belakang CSS3
Referensi CSS: properti latar belakang