Kamu pingin tahu cara membuat full screen background image (gambar latar belakang)? Nah pada kali ini saya akan membahas cara membuat full screen background dengan HTML dan CSS. Saat ini sudah banyak website atau situs yang menggunakan layout/desain full screen background /latar belakang. Karena desain seperti ini sudah pasti akan membuat website kamu semakin menarik. Show
Oke tanpa berlama-lama saya akan coba jabarkan sekarang. Namun pertama-tama persiapkan dahulu perlengkapan yang akan kita butuhkan nantinya. Peralatan yang dibutuhkan & dipersiapkan untuk cara membuat full screen background image ini:
Tahap yang dilakukan:Pertama-tama gunakan mark-up HTML standar.
Untuk memudahkan background agar tidak menabrak body, sebaiknya bikin element div yang baru untuk menjadi kontainer utama judul dan paragraf teks. Jadi kode HTML nya akan menjadi seperti ini:
Nah untuk mempersingkat dan mempermudah kerja kita untuk memberi style/CSS untuk elemen-elemen diatas, kita bisa menggunakan Bootstrap 4. Jadi kita tinggal menambahkan css bootstrap dari CDN yang sudah disediakan. Jika kamu tidak ingin menggunakan file secara online, kamu bisa mendownload file CSS bootstrap ini disini. Setelah kita memasukan CDN bootsrap tersebut, kode HTML nya akan menjadi seperti ini:
Selanjutnya kita akan mulai memasukkan CSS untuk membuat background. Untuk gambar background nya sendiri, saya akan menggunakan gambar dari Placekitten. Jadi kodenya akan menjadi seperti ini:
Seperti yang kamu lihat diatas, saya memberikan styling “background-image” kepada elemen dengan class “bg-utama”. Kode css ini maksudnya adalah memberi gambar latar belakang ke elemen “bg-utama” tersebut. Namun saat ini, bentuknya masih belum bagus. Untuk itu kita akan tambahan kode css lagi untuk mempercantik tampilannya.
Demi menghasilkan height/tinggi yang full screen, disini saya memasukan css pada elemen dengan class “bg-utama” yaitu “height:100%;”. Namun dikarenakan elemen html dan elemen body pada kode itu belum 100%, maka saya juga memasukkan css untuk height:100%; pada kedua elemen tersebut. Nah, untuk elemen dengan kelas “bg-utama”, saya juga memasukan css background-size, background-position dan text align. Penjelasan:
Namun seperti yang kita liat digambar atas, masih belum terlalu rapih. Untuk itu saya akan menambahkan beberapa kode CSS lagi untuk merapihkannya.
Nah sekarang hasilnya sudah cukup lumayan kan. Semua elemen berada ditengah. Jadi selain saya menambahkan css baru, saya pun menambahkan “parent” elemen setelah “bg-utama”, yaitu “konten-ditengah”. Penjelasannya:
Nah sekarang kamu coba praktekan untuk membuat sendiri kode tersebut. Cukup mudah kan cara membuat full screen background / latar belakang di HTML dan CSS? Kalau kamu tertarik untuk belajar HTML dan CSS ini lebih lanjut, kamu bisa mencoba mengunjungi situs ini. Disitus itu selain kamu bisa berlangganan kursus-kursus online, kamu juga mendapatkan langganan untuk Digital Asset yang cukup banyak. Mulai dari gambar, musik, video bahkan sampai HTML template juga ada. Buat kamu yang pengen tau berapa ukuran gambar yang tepat untuk website berlayout full screen, kamu bisa liat disini. Buat kamu para pemula yang ingin menyewa hosting buat website kamu, kamu bisa membaca cara mencari hosting yang tepat disini. Bagaimana penulisan HTML yang benar untuk menambahkan warna background?Jika Anda ingin menggunakan warna-warna dasar pada kode HTML, tikkan nama warna tanpa tagar (“#”) sebagai pengganti kode warna HTML. Sebagai contoh, jika Anda ingin menggunakan warna oranye sebagai warna latar halaman, tikkan background-color: orange; .
Tag apa yang perlu di gunakan untuk background website?Untuk menambahkan background di html maka perlu menggunakan style CSS (Cascading Style Sheet). Style ini dapat kita buat langsung didalam tag <head> pada dokumen htmlnya. atau kita membuat sebuah file sendiri dengan exntensi .css lalu kemudian tinggal kita panggil dari dalam tag <head> juga.
Bagaimana cara mengubah warna background halaman web?Cara Mengubah Warna Background Website WordPress. Pilih menu Appearance > Customize.. Pilih menu Colors (Jika tidak ada, bisa cari background, background color, dll). Klik tulisan background color (Jika tidak ada juga, coba cara yang berikutnya). Pilih warnanya.. Klik tombol Publish.. Apa fungsi background color pada HTML?HTML Background digunakan untuk menentukan background yang dapat digunakan pada tampilan web. Background dapat berupa warna atau gambar. Bgcolor : merupakan attribute untuk menentukan warna pada halaman HTML.
|