Properti latar belakang CSS
Contoh
Setel properti latar belakang yang berbeda dalam satu deklarasi:
body
{
background: lightblue url("img_tree.gif") no-repeat fixed center;
}
Definisi dan Penggunaan
Properti background
adalah properti singkatan untuk:
- warna latar belakang
- gambar latar belakang
- latar belakang-posisi
- ukuran latar belakang
- latar belakang-ulangi
- latar belakang-asal
- klip latar belakang
- lampiran-latar belakang
Tidak masalah jika salah satu nilai di atas hilang, misalnya background:#ff0000 url(smiley.gif); Diperbolehkan.
Nilai bawaan: | lihat properti individu |
---|---|
Diwarisi: | tidak |
Animasi: | ya, lihat properti individu . Baca tentang animasi |
Versi: kapan: | CSS1 + properti baru di CSS3 |
Sintaks JavaScript: | objek .style.background="url merah(smiley.gif) kiri atas no-repeat" |
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.
Sintaks CSS
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
Catatan: Jika salah satu properti dalam deklarasi singkatan adalah properti bg-size, Anda harus menggunakan / (garis miring) untuk memisahkannya dari properti bg-position, misalnya background:url(smiley.gif) 10px 20px/50px 50px ; akan menghasilkan gambar latar belakang, diposisikan 10 piksel dari kiri, 20 piksel dari atas, dan ukuran gambar akan menjadi lebar 50 piksel dan tinggi 50 piksel.
Catatan: Jika menggunakan beberapa sumber gambar latar belakang tetapi juga menginginkan warna latar belakang, parameter warna latar harus menjadi yang terakhir dalam daftar.
Nilai properti
Value | Description | CSS |
---|---|---|
background-color | Specifies the background color to be used | 1 |
background-image | Specifies ONE or MORE background images to be used | 1 |
background-position | Specifies the position of the background images | 1 |
background-size | Specifies the size of the background images | 3 |
background-repeat | Specifies how to repeat the background images | 1 |
background-origin | Specifies the positioning area of the background images | 3 |
background-clip | Specifies the painting area of the background images | 3 |
background-attachment | Specifies whether the background images are fixed or scrolls with the rest of the page | 1 |
initial | Sets this property to its default value. Read about initial | 3 |
inherit | Inherits this property from its parent element. Read about inherit | 2 |
Halaman Terkait
Tutorial CSS: Latar Belakang CSS , Latar Belakang CSS (lanjutan)
Referensi DOM HTML: properti latar belakang