Ok Kembali lagi di blog saya kodekreasi.com , kali ini kita akan membahas cara membuat background html full screen menggunakan image. So tunggu apa lagi langsung saja siapkan text editor kalian . Membuat sebuah background menggunakan image memanglah cukup susah-susah gampang karena kita harus memperhatikan ukuran dari image yang akan kita jadikan background. Gambar yang akan dipasang sebagai backround biasanya memiliki ukuran yang cukup besar biasanya diatas 1000px serta kualitas resolusinya pun cukup baik agar saat dipasang tidak pecah. Namun image yang kalian pakai usahakan jangan terlalu besar ukurannya karena dapat membuat loading webssite menjadi semakin lambat.
Pada tutorial kali ini saya akan mencoba mempraktikkan cara membuat background image di html full screen dengan menggunakan css. Yang perlu kalian siapkan pada tutorial kali ini adalah gambar yang dapat kalian download dari situs-situs penyedia gambar gratis seperti pixabay atau upsplash. Selain itu pastikan kalian juga sudah menginstall text editor seperti notepadd++, sublime text atau visual studio code . Untuk testingnya kalian dapat menginstall webserver lokal pada laptop atau pc kalian seperti apache, nginx atau kalian juga bisa menggunakan xampp. Jika semua requirement tersebut telah terpenuhi lansung saja kita mencoba mempraktikkanya.
Cara setting background image tetap diposisinya lewat css
Dari scribt program diatas diketahui jika kita menggabungkan scribt css kedalam file html. Scribt css berada diantara tag . Sekarang kita coba fuokus ke scribt body pada css. Kode pada body merupakan style css dari tag body pada html . Kode background-image: url(./person-984282_1280.jpg); digunakan untuk menjadikan file image person-984282_1280.jpg menjadi background pada tag body. Sedangkan scribt background-size: cover; digunakan untuk mengatur image agar bisa full memenuhi ukuran layar. Kemudian untuk scribt css background-repeat: no-repeat; digunakan agar ketika image yang dijadikan background memiliki ukuran yang kecil dia tidak muncul berkali-kali untuk memenuhi ukuran layar sehingga image yang ditampilkan sebagai background pun hanya 1 buah image saja. Kemudian untuk scribt background-position: center; digunakan untuk mengatur posisi background secara vertikal dan horizontal agar berada diposisi tengah-tengah. Kemudian scribt background-attachment: fixed; digunakan untuk mengatur posisi gambar agar tetap kitika discroll atau tidak akan tergeser oleh elemen lain seperti karena event pada humberger menu dll.
Halo teman-teman, pada kesempatan kali ini saya akan menjelaskan cara mengatur posisi pada gambar di css. Mungkin sebagian dari teman-teman sudah tahu cara untuk memasang gambar dengan CSS, baik itu di element body html maupun element lainnya. Untuk memasang gambar disuatu element melalui CSS, biasanya teman-teman menggunakan property background-image yang dimana sproperty tersebut ditujukan untuk membuat background dengan file gambar yang dihubungkan dengan url lokasi gambar. Namun tidak hanya sabatas itu saja, di CSS teman-teman bisa juga memasang gambar beserta dengan penentuannya posisi gambar yang tampilkannya pada properti Background CSS. Mungkin sebagian dari teman-teman sudah tahu akan tetapi masih bingung untuk mengaplikasikannya di CSS, sehingga ketika ingin membuat background dengan tampilan yang menarik tidak bisa diwujudkan, karena hal tersebut sangat penting jika menurut saya. Karena dengan posisi tersebut akan berpengaruh dengan pengulangan gambar jika resolusi dari gambar tersebut dengan ukuran kecil, sedangkan resolusi yang dibutuhkan di berbagai perangkat berbeda-beda. 2ff7e9595c
Comments