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 :
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.
1 2 3 4 5 6 7 |
html,body { background: url(/surat/asset/img/bg-login.jpg) no-repeat center center fixed; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; } |
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.
Demikianlah trik sederhana ini, semoga bermanfaat. Terima kasih telah berkunjung ke harviacode.com.
mksih nih tutorialny sngt bermanfaat sekali.
sama2 kak dolop
hahaha makasih um, dari yang ane pernah baca dari google cuman cara ini doang yang berhasil
hahaha makasih mas Tedaz…
sangat bermanfaat nih trik nya, 100% berhasil,, makasih yah admin (y)
sip mas Fauzy
sangat bermanfaat 100% berhasil, makasih ya bang admin
Terima Kasih Bang, Semoga Bermanfaat, Tambah maju
sip mas Dewa
postingan yang sangat membantu
sip Aloneness 😀
terimakasih, sangat membantu tugas saya
sama2 mas maulana
terimakasih mas ,sangat bermanfaat.
sama2 mas