Cara Menambahkan Background di HTML — Warna & Gambar – Kelas Programmer | Tempat Panduan Belajar Membuat Website Profesional

Menambahkan background pada halaman HTML adalah langkah sederhana tetapi penting dalam memperindah tampilan situs. Dalam panduan ini, kamu akan belajar cara menggunakan warna, gambar lokal, maupun URL gambar sebagai background dengan kode CSS yang sesuai.

Table of Contents

2. Pemilihan Background: Warna atau Gambar?

Background Warna: Cocok untuk tampilan minimalis atau brand color yang konsisten.
Background Gambar: Memberikan nuansa visual unik tapi perlu optimasi agar tidak memperlambat loading.

3. Cara Menambahkan Background Warna di HTML

Metode A: Inline CSS

<body style="background-color: lightblue;">
  <h1>Selamat Datang di Situs Saya</h1>
</body>

Metode B: Internal CSS

<head>
  <style>
    body {
      background-color: #F0F0F0;
    }
  </style>
</head>

Pendekatan ini lebih bersih dan mudah dikelola dibandingkan penggunaan atribut bgcolor, yang sudah tidak direkomendasikan di HTML5.

4. Cara Menambahkan Background Gambar di HTML

Gambar Lokal

<style>
  body {
    background-image: url('gambar.jpg');
  }
</style>

Gambar dari URL

<style>
  body {
    background-image: url("https://example.com/path-to-image.jpg");
  }
</style>

5. Menyesuaikan Tampilan Gambar Background (CSS Tambahan)

Properti CSS	Fungsi
`background-size`	Mengatur ukuran: `cover`, `contain`, atau ukuran khusus (misalnya `20px 40px`).
`background-repeat`	Menghindari pengulangan: `no-repeat`, `repeat-x`, `repeat-y`.
`background-position`	Menentukan posisi gambar: `center center`, `top right`, atau nilai pixel.

6. Praktik Terbaik & Tips

Optimalkan ukuran gambar agar cepat dimuat.
Gunakan format .webp atau .jpg/.png yang sudah terkompresi ringan.
Pastikan warna background memiliki kontras memadai untuk keterbacaan teks.
Tambahkan fallback warna saat gambar gagal dimuat.

body {
  background-color: #f5f5f5;
  background-image: url('background.jpg');
}

7. Contoh Lengkap: Kombinasi Warna dan Gambar

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Cara Menambahkan Background HTML</title>
  <style>
    body {
      background-color: #fdfdfd;
      background-image: url('https://via.placeholder.com/800x600');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
    }
    h1 {
      text-align: center;
      padding: 50px;
      color: #333;
    }
  </style>
</head>
<body>
  <h1>Contoh Latar Belakang Gambar yang Responsif</h1>
</body>
</html>

8. FAQ

Q: Apa perbedaan antara background-color dan background-image?
A: background-color memberikan warna solid, sementara background-image menggunakan gambar.

Q: Bagaimana mencegah background image berulang?
A: Tambahkan background-repeat: no-repeat;.

Q: Bagaimana agar gambar background memenuhi layar?
A: Gunakan background-size: cover;.

Q: Apakah background akan terlihat sama di semua perangkat?
A: Ya, jika menggunakan properti responsif seperti cover dan center.