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 diatur menggunakan atribut gaya terpisah. Disarankan bagi penulis non-ahli untuk menggunakan atribut terpisah untuk keseimbangan yang lebih baik.

Lihat juga:

Panduan CSS:Latar Belakang CSS

Panduan CSS3:Latar belakang CSS3

Panduan CSS:Atribut background

Contoh

atur gaya latar belakang dokumen:

document.body.style.background = "#f3f3f3 url('img_tree.png') tak ulang kanan atas";

Try it yourself

Ada lebih banyak contoh TIY di bawah halaman.

Sintaks

kembalikan atribut background:

objek.style.background

atur atribut background:

objek.style.background = "warna gambar ulang pendamping posisi ukuran asal potong|awal|mewarisi"

nilai atribut

Nilai Deskripsi
warna atur warna latar belakang elemen.
gambar atur gambar latar belakang elemen.
ulang atur cara pengulangan gambar latar belakang.
pendamping atur apakah gambar latar belakang tetap atau bergerak bersama halaman.
posisi atur posisi awal gambar latar belakang.
ukuran atur ukuran gambar latar belakang.
asal atur area lokasi penempatan latar belakang.
potong atur area gambar penggambaran latar belakang.
awal atur atribut ini ke nilai baku. Lihat awal.
mewarisi warisi atribut ini dari elemen induknya. Lihat mewarisi.

Detil teknologi

Nilai baku: transparan tak ada ulang berputar 0% 0% otomatis padding-box border-box
Nilai kembalian: String, mewakili latar belakang elemen.
Versi CSS: CSS1 + sifat baru dalam CSS3

Lebih banyak contoh

Contoh 2

Ubah latar belakang elemen DIV:

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

Try it yourself

Example 3

Set the background color for the document:

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

Try it yourself

Example 4

Set the background image for the document:

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

Try it yourself

Example 5

Set the background image to non-repeating:

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

Try it yourself

Example 6

Set the background image to fixed (does not scroll):

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

Try it yourself

Example 7

Change the position of the background image:

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

Try it yourself

Example 8

Return the background attribute value of the document:

document.body.style.background;

Try it yourself

Browser support

background Is a CSS1 (1996) feature.

All browsers fully support it:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
Support Support Support Support Support Support

Comments

Tiga atribut baru ditambahkan dalam CSS3 (1999):