Cara - Gambar Halaman Penuh
Pelajari cara membuat gambar latar halaman penuh dengan CSS.
Gambar Halaman Penuh
Pelajari cara membuat gambar latar belakang yang menutupi seluruh jendela browser. Contoh berikut menunjukkan gambar latar belakang responsif layar penuh (dan setengah layar):
Demo - Gambar latar halaman penuh
Demo - Gambar latar setengah halaman
Cara Membuat Gambar Tinggi Penuh
Gunakan elemen wadah dan tambahkan gambar latar belakang ke wadah dengan height: 100%
.
Tip: Gunakan 50% untuk membuat gambar latar setengah halaman. Kemudian gunakan properti latar belakang berikut untuk memusatkan dan menskalakan gambar dengan sempurna:
Catatan: Untuk memastikan bahwa gambar menutupi seluruh layar, Anda juga harus menerapkan height: 100%
ke <html> dan <body>:
Contoh
body, html {
height: 100%;
}
.bg {
/* The image used */
background-image: url("img_girl.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat:
no-repeat;
background-size: cover;
}
Gambar latar setengah halaman:
Contoh
.bg {
height: 50%;
}