Style background 属性

定义和用法

background 属性以简写形式设置或返回最多八个单独的背景属性。

通过此属性，您可以设置/返回以下一项或多项（以任意顺序）：

DOM 属性 CSS 属性
backgroundAttachment background-attachment
backgroundClip background-clip
backgroundColor background-color
backgroundImage background-image
backgroundOrigin background-origin
backgroundPosition background-position
backgroundRepeat background-repeat
backgroundSize background-size

Atribut di atas juga dapat diset menggunakan atribut gaya yang terpisah. Disarankan penulis non-advanced untuk menggunakan atribut yang terpisah untuk kontrol yang lebih baik.

Lihat juga:

Panduan CSS:Latar Belakang CSS

Panduan CSS3:Latar belakang CSS3

Panduan CSS:Atribut background

Contoh

Setel gaya latar belakang dokumen:

document.body.style.background = "#f3f3f3 url('img_tree.png') no-repeat right top";

Coba sendiri

Ada banyak contoh TIY lainnya di bawah halaman.

Sintaks

Kembalikan atribut background:

object.style.background

Setel atribut background:

object.style.background = "color image repeat attachment position size origin clip|initial|inherit"

Nilai atribut

Nilai Deskripsi
color Setel warna latar belakang elemen.
image Setel gambar latar belakang elemen.
repeat Setel cara pengulangan gambar latar belakang.
attachment Setel apakah gambar latar belakang tetap atau bergerak dengan halaman.
position Setel posisi awal gambar latar belakang.
size Setel ukuran gambar latar belakang.
origin Setel area lokasi penempatan latar belakang.
clip Setel area pengegamian gambar latar belakang.
initial Setel atribut ini ke nilai defaultnya. Lihat initial.
inherit Mengambil atribut ini dari elemen induknya. Lihat inherit.

Detil teknis

Nilai default: transparent none repeat scroll 0% 0% auto padding-box border-box
Nilai kembalian: String yang menyatakan latar belakang elemen.
Versi CSS: Versi CSS: CSS1 + properti baru di CSS3

Beberapa contoh lainnya

Contoh 2

Ubah latar belakang elemen DIV:

document.getElementById("myDIV").style.background = "url('smiley.gif') blue repeat-x center";

Coba sendiri

Contoh 3

Atur warna latar belakang dokumen:

document.body.style.backgroundColor = "red";

Coba sendiri

Contoh 4

Atur gambar latar belakang dokumen:

document.body.style.backgroundImage = "url('img_tree.png')";

Coba sendiri

Contoh 5

Atur gambar latar belakang menjadi tidak berulang:

document.body.style.backgroundRepeat = "repeat-y";

Coba sendiri

Contoh 6

Atur gambar latar belakang menjadi tetap (tidak akan bergerak):

document.body.style.backgroundAttachment = "fixed";

Coba sendiri

Contoh 7

Ubah lokasi gambar latar belakang:

document.body.style.backgroundPosition = "top right";

Coba sendiri

Contoh 8

Kembalikan nilai atribut latar belakang dokumen:

document.body.style.background;

Coba sendiri

Dukungan peramban

background Adalah fitur CSS1 (1996).

Semua peramban mendukungnya sepenuhnya:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
Dukungan Dukungan Dukungan Dukungan Dukungan Dukungan

Komentar

CSS3 (1999) menambahkan tiga atribut baru: