Body Background Html Full Screen

3 min read Jun 30, 2024
Body Background Html Full Screen

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; dan background-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.

Related Post


Latest Posts


Featured Posts