Properti background-size CSS

Definisi dan penggunaan

background-size Atribut menentukan ukuran gambar latar.

Lihat pula:

Panduan CSS:Latar Belakang CSSdanLatar belakang CSS (Advanced)

Panduan referensi DOM HTML:Atribut backgroundSize

Contoh

Tentukan ukuran gambar latar:

div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}

Coba sendiri

Syntax CSS

background-size: length|percentage|cover|contain;

Nilai atribut

Nilai Deskripsi Pengujian
length

Mengatur tinggi dan lebar gambar latar.

Nilai pertama menentukan lebar, nilai kedua menentukan tinggi.

Jika hanya diatur satu nilai, nilai kedua akan diatur menjadi "auto".

 Pengujian
percentage

Mengatur lebar dan tinggi gambar latar dalam persen dari elemen induk.

Nilai pertama menentukan lebar, nilai kedua menentukan tinggi.

Jika hanya diatur satu nilai, nilai kedua akan diatur menjadi "auto".

 Pengujian
cover

Mengembangkan gambar latar hingga cukup besar untuk menutupi area latar penuh.

Beberapa bagian gambar latar mungkin tidak terlihat di area penempatan latar.

 Pengujian
contain Mengembangkan gambar hingga ukuran maksimal untuk membuat lebar dan tinggi gambar sepenuhnya sesuai dengan area konten. Pengujian

Detil teknis

Nilai default: auto
Inheritsi: no
Versi: CSS3
Syntax JavaScript: object.style.backgroundSize="60px 80px"

Contoh lebih banyak

Melengkapi gambar latar
Melengkapi gambar latar untuk menutupi area konten penuh
Melengkapi gambar latar untuk memancarkan gambar latar secara horizontal empat kali
Melengkapi gambar latar untuk membuat gambar latar dipancarkan secara horizontal empat kali.

Dukungan browser

Angka di tabel menunjukkan versi pertama browser yang mendukung atribut ini penuh.

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
4.0
1.0 -webkit-		 9.0 4.0
3.6 -moz-		 4.1
3.0 -webkit-		 10.5
10.0 -o-