Membuat Background Body HTML Full Screen
Membuat background body HTML full screen merupakan hal yang mudah dan bisa dilakukan dengan beberapa cara. Berikut beberapa cara yang bisa anda gunakan:
1. Menggunakan CSS height: 100vh
Cara paling umum dan sederhana adalah dengan menggunakan properti height
dalam CSS dengan nilai 100vh
. vh
adalah singkatan dari viewport height, yang berarti 100% dari tinggi layar.
Background Full Screen
2. Menggunakan CSS min-height: 100vh
Cara ini mirip dengan cara pertama, namun menggunakan properti min-height
sebagai gantinya. Perbedaannya adalah min-height
akan membuat background tetap full screen meskipun konten website lebih tinggi dari tinggi layar.
Background Full Screen
3. Menggunakan JavaScript
Anda juga bisa menggunakan JavaScript untuk membuat background full screen. Berikut contohnya:
Background Full Screen
Kode JavaScript ini akan mengatur tinggi body
ke tinggi layar.
Tips tambahan
- Anda bisa menambahkan properti
background-size: cover;
danbackground-repeat: no-repeat;
untuk mengatur agar gambar background memenuhi seluruh layar dan tidak berulang. - Untuk mengatur warna background, gunakan properti
background-color
dalam CSS. - Anda bisa menggunakan gambar atau video sebagai background dengan properti
background-image
.
Dengan menggunakan salah satu cara di atas, Anda bisa membuat background body HTML full screen dengan mudah.