cara membuat background html full screen

Daftar Isi:

Komponen Dasar
Menambahkan Latar Belakang Lay...
Rincian Properti CSS

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.

Komponen Dasar

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.

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.

Rincian Properti CSS

Berikut ini adalah penjelasan singkat mengenai properti-properti CSS yang digunakan:

Background-image

Properti ini digunakan untuk memberikan gambar latar belakang pada elemen.

Background-size

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.

Background-position

Properti ini digunakan untuk mengatur posisi gambar latar belakang.

Background-repeat

Properti ini digunakan untuk mengatur apakah gambar latar belakang perlu diulang atau tidak.

Height: 100vh

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!

CARA MEMBUAT BACKGROUND HTML FULL SCREEN

Panduan langkah-demi-langkah tentang cara membuat latar belakang atau background HTML menjadi layar penuh atau full screen dengan mudah dan cepat. Ideal untuk pemula dalam pembuatan website.