hmmm..lama banget nggak nulis. harap maklum ya..lagi banyak project dan mahasiswa kursus..hehe. Kali ini saya akan menulis bagaimana cara membuat gambar  background fullscrenn dengan css. Terkadang kita menginginkan gambar background kita tampilannya penuh satu halaman dan tidak terpengaruh pada ukuran layar.

Berikut ini adalah contoh tampilan background yang terpengaruh oleh ukuran layar. Tampilan ini muncul ketika pengguna melakukan zoom out pada layarnya :

fullscreen background

Terlihat pada tampilan di atas bahwa gambar backgorund menjadi kecil dan ada blank space di sekitar gambar. Tentu hal tersebut membuat tampilan aplikasi atau website kita kurang menarik.

Membuat gambar background fullscreen dengan CSS

Untuk menyelesaikan permasalahan tersebut caranya cukup mudah yaitu anda cukup menambahkan CSS berikut ini pada halaman anda.

 

Jalankan kembali halaman tersebut dan cobalah untuk mengubah zoom layar dengan menekan CTRL + ‘-‘. Maka akan terlihat tampilan gambar background tidak akan terpengaruh dan akan selalu full screen.

fullscreen background 2

Demikianlah trik sederhana ini, semoga bermanfaat. Terima kasih telah berkunjung ke harviacode.com.