Ada empat sintaks berbeda yang dapat Anda gunakan dengan properti ini. sintaks kata kunci ["auto", "cover" dan "contain"], sintaks satu nilai [mengatur lebar gambar [tinggi menjadi "otomatis"], sintaks dua nilai [nilai pertama. lebar gambar, nilai kedua. tinggi], dan beberapa sintaks latar belakang [dipisahkan dengan koma]
Tampilkan demo ❯
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti
Angka diikuti dengan -webkit-, -moz-, atau -o- tentukan versi pertama yang berfungsi dengan awalan
Propertybackground-size 4. 0
1. 0 -webkit-9. 04. 0
3. 6 -moz-4. 1
3. 0 -webkit-10. 5
10. 0 -o-
Sintaks CSS
background-size. mobil. panjang. menutupi. berisi. awal. mewarisi;
Nilai properti
ValueDescriptionDemoautoDefault nilai. Gambar latar belakang ditampilkan dalam ukuran aslinyaDemo ❯panjangMenyetel lebar dan tinggi gambar latar belakang. Nilai pertama mengatur lebar, nilai kedua mengatur tinggi. Jika hanya satu nilai yang diberikan, yang kedua disetel ke "otomatis". Baca tentang satuan panjang Demo ❯percentage Mengatur lebar dan tinggi gambar latar belakang dalam persentase elemen induk. Nilai pertama mengatur lebar, nilai kedua mengatur tinggi. Jika hanya satu nilai yang diberikan, yang kedua disetel ke "otomatis"Demo ❯coverUbah ukuran gambar latar belakang untuk menutupi seluruh wadah, bahkan jika itu harus merentangkan gambar atau memotong sedikit salah satu tepiDemo ❯berisiUbah ukuran gambar latar belakang . Baca tentang initialinheritInherits properti ini dari elemen induknya. Baca tentang mewarisi
Lebih Banyak Contoh
Contoh
Tentukan ukuran gambar latar belakang dengan persen
#Contoh 1 {
latar belakang. url [gunung. jpg];
background-repeat. tidak ada pengulangan;
background-size. 100% 100%;
}
#contoh2 {
latar belakang. url [gunung. jpg];
background-repeat. tidak ada pengulangan;
background-size. 75% 50%;
}
Contoh
Tentukan ukuran gambar latar belakang dengan "penutup"
#Contoh 1 {
latar belakang. url [gunung. jpg];
background-repeat. tidak ada pengulangan;
background-size. menutupi;
}
Contoh
Tentukan ukuran gambar latar belakang dengan "berisi"
#Contoh 1 {
latar belakang. url [gunung. jpg];
background-repeat. tidak ada pengulangan;
background-size. berisi;
}
Contoh
Di sini kita memiliki dua gambar latar belakang. Kami menentukan ukuran gambar latar pertama dengan "berisi", dan gambar latar kedua dengan "penutup"
Jika properti width
_ disetel ke persentase dan properti height
disetel ke "otomatis", gambar akan responsif dan diperbesar dan diperkecil
Perhatikan bahwa pada contoh di atas, gambar dapat diperbesar menjadi lebih besar dari ukuran aslinya. Solusi yang lebih baik, dalam banyak kasus, adalah menggunakan properti max-width
sebagai gantinya
Menggunakan Properti max-width
Jika properti max-width
_ disetel ke 100%, gambar akan diperkecil jika perlu, tetapi jangan pernah diperbesar menjadi lebih besar dari ukuran aslinya
Tambahkan Gambar ke Halaman Web Contoh
Gambar Latar Belakang
Gambar latar belakang juga dapat merespons pengubahan ukuran dan penskalaan
Di sini kami akan menunjukkan tiga metode berbeda
1. Jika properti background-size
_ disetel ke "berisi", gambar latar akan diskalakan, dan mencoba menyesuaikan dengan area konten. Namun, gambar akan mempertahankan rasio aspeknya [hubungan proporsional antara lebar dan tinggi gambar]
Ini kode CSSnya
Contoh
div {
lebar. 100%;
tinggi. 400px;
gambar latar belakang. url['img_bunga. jpg'];
background-repeat. tidak ada pengulangan;
background-size. berisi;
berbatasan. 1px merah pekat;
}
2. Jika properti background-size
_ disetel ke "100% 100%", gambar latar belakang akan melebar hingga menutupi seluruh area konten
Ini kode CSSnya
Contoh
div {
lebar. 100%;
tinggi. 400px;
gambar latar belakang. url['img_bunga. jpg'];
background-size. 100% 100%;
berbatasan. 1px merah pekat;
}
3. Jika properti background-size
_ disetel ke "penutup", gambar latar akan diskalakan untuk menutupi seluruh area konten. Perhatikan bahwa nilai "penutup" menjaga rasio aspek, dan beberapa bagian dari gambar latar mungkin terpotong
Ini kode CSSnya
Contoh
div {
lebar. 100%;
tinggi. 400px;
gambar latar belakang. url['img_bunga. jpg'];
background-size. menutupi;
berbatasan. 1px merah pekat;
}
Gambar Berbeda untuk Perangkat Berbeda
Gambar besar bisa sempurna di layar komputer besar, tetapi tidak berguna di perangkat kecil. Mengapa memuat gambar besar ketika Anda harus menurunkannya?
Ini adalah satu gambar besar dan satu gambar lebih kecil yang akan ditampilkan di perangkat yang berbeda
Contoh
/* Untuk lebar lebih kecil dari 400px. */
tubuh {
gambar latar belakang. url['img_bunga kecil. jpg'];
}
/* Untuk lebar 400px dan lebih besar. */
@media hanya layar dan [min-width. 400px] {
tubuh {
gambar latar belakang. url['img_bunga. jpg'];
}
}
Anda dapat menggunakan kueri media min-device-width
, alih-alih min-width
, yang memeriksa lebar perangkat, bukan lebar browser. Maka gambar tidak akan berubah saat Anda mengubah ukuran jendela browser
Contoh
/* Untuk perangkat yang lebih kecil dari 400px. */
tubuh {
gambar latar belakang. url['img_bunga kecil. jpg'];
}
/* Untuk perangkat 400px dan lebih besar. */
@media hanya layar dan [min-device-width. 400px] {
tubuh {
gambar latar belakang. url['img_bunga. jpg'];
}
}
HTML
Elemen
Elemen HTML _ memberi pengembang web lebih banyak fleksibilitas dalam menentukan sumber daya gambar
Penggunaan elemen _ yang paling umum adalah untuk gambar yang digunakan dalam desain responsif. Alih-alih memiliki satu gambar yang diperbesar atau diturunkan berdasarkan lebar area pandang, beberapa gambar dapat dirancang untuk mengisi area pandang browser dengan lebih baik
Elemen berfungsi mirip dengan elemen
dan
. Anda mengatur sumber yang berbeda, dan sumber pertama yang sesuai dengan preferensi adalah sumber yang digunakan