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 membuat background html full screen
Langkah pertama yang akan kita lakukan adalah membuat sebuah folder untuk project yang akan kita kerjakan karena disini saya memakai xampp maka saya membuat sebuah folder baru di dalam folder htdocs .
Pindahkan file image yang akan kalian gunakan sebagai bacground ke folder yang telah kalian buat . Di tutorial ini saya menggunakan file image yang saya download secara gratis dari pixabay.
Buka text editor kalian(pada tutorialini saya menggunakan text editor visual studio code) dan buat sebuah file baru dengan nama index.html.
Isi text index.html dengan scribt berikut ini :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tutorial HTML</title>
<style>
body{
background-image: url(./person-984282_1280.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
height: 100%;
}
.title{
text-align: center;
font-size: 2.5em;
color: #000;
}
</style>
</head>
<body>
<h1 class="title">
Ini background fullscreen
</h1>
</body>
</html>
Hasilnya :
Penjelasan scribt program :
Dari scribt program diatas diketahui jika kita menggabungkan scribt css kedalam file html. Scribt css berada diantara tag <style></style>. 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.
Sekian artikel dari saya kali ini tentang cara membuat background html full screen jangan lupa tinggakan komentar jika kalian mengalami permasalahan .
incoming search terms :
- cara membuat background image di html
- cara memasukan background di html
- cara membuat background di html
2 Comments
Trackbacks and Pingbacks
[…] setelah pada artikel sebelumnya kita telah mempelajari tentang cara membuat background html full screen , kali ini kita akan mecoba membuat web dengan html yang tentunya pada artikel ini web yang akan […]
[…] Baca Juga : Cara Membuat Background Html Full Screen […]