Skodev
Belajar coding dalam bahasa Indonesia
DISKON TERBATAS! Masukkan kupon "skillbaru" saat checkout di kelas apa saja
Skodev
Belajar coding dalam bahasa Indonesia
Daftar Isi:
Memiliki background atau latar belakang yang menarik di situs web mu dapat memberikan kesan pertama yang kuat kepada pengunjung. Background bisa menjadikan situs web mu lebih hidup, menarik, dan berdampak pada gaya serta penampilan keseluruhan situs web. Sebuah fitur yang bagus untuk memiliki dalam setiap situs web adalah latar belakang layar penuh atau full screen. Oleh karena itu, dalam artikel ini, kita akan membahas tentang cara membuat background HTML menjadi layar penuh.
Ada beberapa elemen dasar yang perlu kamu persiapkan sebelum memulai proses ini:
<!DOCTYPE html>
<html>
<head>
<title>Judul Situs Web</title>
<style>
body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
</body>
</html>Pada kode di atas, kamu telah membuat struktur dasar HTML. Selanjutnya kita akan menambahkan latar belakang layar penuh.
Untuk membuat latar belakang layar penuh, kamu perlu menggunakan CSS.
<style>
body {
background-image: url('gambar.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 100vh;
margin: 0;
padding: 0;
}
</style>Pada kode di atas, tentukan properti background-image dengan URL dari gambar yang ingin kamu gunakan. Background-size: cover; akan memastikan gambar mu menutupi seluruh layar. Background-position: center; akan memastikan gambar mu berada di tengah. Background-repeat: no-repeat; akan mencegah gambar mu berulang. Height: 100vh; mengatur tinggi elemen menjadi 100% dari tinggi viewport.
Berikut ini adalah penjelasan singkat mengenai properti-properti CSS yang digunakan:
Properti ini digunakan untuk memberikan gambar latar belakang pada elemen.
Properti ini digunakan untuk mengatur ukuran gambar latar belakang. Nilai cover berarti gambar akan diperbesar atau diperkecil sedemikian rupa sehingga gambar latar belakang mu bisa menutupi seluruh area elemen tanpa mengubah rasio aspek gambar.
Properti ini digunakan untuk mengatur posisi gambar latar belakang.
Properti ini digunakan untuk mengatur apakah gambar latar belakang perlu diulang atau tidak.
vh adalah unit viewport yang berarti ‘persen dari tinggi viewport’. Jadi, ‘100vh’ berarti 100% dari tinggi viewport.
Demikianlah cara membuat latar belakang HTML menjadi layar penuh. Seperti yang kamu lihat, dengan pengetahuan dasar HTML dan CSS, kamu dapat dengan mudah membuat latar belakang yang menarik untuk situs web mu. Selamat mencoba!
Link terkait: