Mau bikin tampilan website yang kece? Salah satu cara paling gampang adalah pakai background image di HTML. Dengan gambar latar yang pas, website lo bisa kelihatan lebih menarik dan profesional. Nah, di artikel ini, kita bakal bahas semua hal penting tentang background image di HTML, mulai dari dasar sampai trik keren buat bikin tampilan lebih mantap!
1. Cara Menambahkan Background Image di HTML
Di HTML, background image biasanya diatur pakai CSS dengan properti background-image. Lo bisa nerapin gambar ke elemen tertentu atau ke seluruh halaman. Contoh dasarnya kayak gini:
body {
background-image: url('langit_cerah.jpg');
}
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('langit_cerah.jpg');
}
</style>
</head>
<body>
<h1>Ini adalah contoh background-image</h1>
<body>
</html>
Kode di atas bakal ngeset gambar langit_cerah.jpg sebagai gambar latar belakang. Seperti berikut:
2. Background Image pada Elemen HTML
Gak cuma buat halaman penuh, lo juga bisa pasang background image di elemen tertentu, misalnya div, header, atau section. Caranya hampir sama:
.container {
width: 300px;
height: 200px;
background-image: url('langit_cerah.jpg');
background-size: cover;
background-position: center;
}
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
height: 200px;
background-image: url('langit_cerah.jpg');
background-size: cover;
background-position: center;
}
</style>
</head>
<body>
<h1 class="container">Ini adalah contoh background-image</h1>
<body>
</html>
Hasilnya:
Di sini, background image hanya berlaku buat elemen dengan class .container.
3. Background Image di Seluruh Halaman
Kalo lo mau bikin background gambar buat seluruh halaman, pastikan lo nerapinnya ke elemen <body> kayak gini:
body {
background-image: url('langit_cerah.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('langit_cerah.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>Ini adalah contoh background-image</h1>
<body>
</html>
Hasilnya:
Dengan background-size: cover;, gambar bakal otomatis menyesuaikan dengan ukuran layar.
4. Background Repeat (Buat Pola Keren!)
Secara default, gambar latar belakang bakal nge-repeat, alias diulang-ulang, kalau ukurannya lebih kecil dari elemen tempat dia diterapkan. Nah, lo bisa kontrol ini pakai properti background-repeat:
.container {
background-image: url('langit_cerah.jpg');
background-repeat: repeat; /* default, gambar diulang */
}
Atau kalau lo mau gambar cuma muncul sekali:
.container {
background-image: url('pattern.png');
background-repeat: no-repeat;
}
Bisa juga diulang cuma ke arah tertentu:
.container {
background-image: url('pattern.png');
background-repeat: repeat-x; /* hanya horizontal */
}
.container {
background-image: url('pattern.png');
background-repeat: repeat-y; /* hanya vertikal */
}
5. Background Cover (Biar Gambar Pas di Layar)
Kadang, kita pengen gambar latar pas sama ukuran elemen atau layar tanpa terpotong aneh. Nah, background-size: cover; solusinya:
body {
background-image: url('cover-image.jpg');
background-size: cover;
background-position: center;
}
Dengan cover, gambar bakal menyesuaikan ukuran layar tanpa merusak proporsinya.
6. Background Stretch (Biar Gambar Ngikutin Ukuran Elemen)
Kalau lo pengen gambar selalu memenuhi seluruh elemen tanpa peduli proporsinya, bisa pakai background-size: 100% 100%; atau contain:
.container {
width: 500px;
height: 300px;
background-image: url('stretch.jpg');
background-size: 100% 100%;
}
Tapi hati-hati, ini bisa bikin gambar keliatan gepeng kalau proporsi aslinya beda dari ukuran elemen.
Kesimpulan
Pakai background image di HTML itu gampang banget, asal tahu triknya! Lo bisa nge-set gambar buat elemen tertentu atau seluruh halaman, mengatur pengulangan, nge-cover layar, atau bikin gambar stretch sesuai kebutuhan.
Kalau mau tampilan lebih keren, pastiin lo pakai gambar yang resolusinya bagus biar gak pecah. Selamat ngoprek, semoga website lo makin kece!
Punya pertanyaan atau trik lain soal background image di HTML? Drop di kolom komentar, ya!
Komentar