CSS: Membuat Gambar Latar (background) Full Page

Anda tentu sering melihat website yang memiliki gambar latar memenuhi layar atau full page seperti terlihat di website www.mobilindo77.com. Biasanya gambar latar dibuat agak blur agar tulisan di atasnya tetap jelas.

Dengan menggunakan CSS gambar latar yang memenuhi layar dapat dibuat dengan cukup mudah. Berikut ini kodenya:

<style>

 html{

  height:100%;width:100%;

 }
 body{

  background:url(path/gambar) no-repeat center center fixed;

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover; 

 }
</style>

Catatan: kode html{...} diatas adalah tweak agar gambar latar/background tetap kelihatan penuh saat ditampilkan di browser bawaan Android. Anda tidak akan melihat perbedaan hasilnya jika kode html{...} tersebut dihapus saat melihat website menggunakan desktop, laptop atau tablet.

Semoga bermanfaat.