Properti ukuran latar belakang CSS
Contoh
Tentukan ukuran gambar latar dengan "otomatis" dan dalam piksel:
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: auto;
}
#example2 {
background: url(mountain.jpg);
background-repeat:
no-repeat;
background-size: 300px 100px;
}
Lebih banyak contoh "Coba Sendiri" di bawah ini.
Definisi dan Penggunaan
Properti background-size
menentukan ukuran gambar latar belakang.
Ada empat sintaks berbeda yang dapat Anda gunakan dengan properti ini: sintaks kata kunci ("otomatis", "penutup" dan "berisi"), sintaks satu nilai (mengatur lebar gambar (tinggi menjadi "otomatis"), sintaks dua nilai (nilai pertama: lebar gambar, nilai kedua: tinggi), dan sintaks beberapa latar belakang (dipisahkan dengan koma).
Nilai bawaan: | mobil |
---|---|
Diwarisi: | tidak |
Animasi: | Ya. Baca tentang animasi |
Versi: kapan: | CSS3 |
Sintaks JavaScript: | objek .style.backgroundSize="60px 120px" |
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Angka yang diikuti oleh -webkit-, -moz-, atau -o- menentukan versi pertama yang berfungsi dengan awalan.
Property | |||||
---|---|---|---|---|---|
background-size | 4.0 1.0 -webkit- |
9.0 | 4.0 3.6 -moz- |
4.1 3.0 -webkit- |
10.5 10.0 -o- |
Sintaks CSS
background-size: auto|length|cover|contain|initial|inherit;
Nilai properti
Value | Description | Play it |
---|---|---|
auto | Default value. The background image is displayed in its original size | |
length | Sets the width and height of the background image. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto". Read about length units | |
percentage | Sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto" | |
cover | Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges | |
contain | Resize the background image to make sure the image is fully visible | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Lebih Banyak Contoh
Contoh
Tentukan ukuran gambar latar belakang dengan persen:
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 100%
100%;
}
#example2 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 75%
50%;
}
Contoh
Tentukan ukuran gambar latar belakang dengan "penutup":
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: cover;
}
Contoh
Tentukan ukuran gambar latar belakang dengan "berisi":
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size:
contain;
}
Contoh
Di sini kita memiliki dua gambar latar belakang. Kami menentukan ukuran gambar latar belakang pertama dengan "berisi", dan gambar latar kedua dengan "penutup":
#example1 {
background: url(img_tree.gif), url(mountain.jpg);
background-repeat: no-repeat;
background-size:
contain, cover;
}
Contoh
Gunakan properti latar belakang yang berbeda untuk membuat gambar "pahlawan":
.hero-image {
background-image: url("photographer.jpg"); /* The
image used */
background-color: #cccccc; /* Used if the image is
unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}
Halaman Terkait
Tutorial CSS: Latar Belakang CSS
Referensi HTML DOM: properti backgroundSize