Background Color CSS: Warna Latar Halaman dan Elemen

Cara mengatur warna background

background-color mengisi kotak elemen dengan warna, termasuk padding-nya dan area di bawah border-nya. Properti ini menerima warna CSS apa pun.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Background color</title>
  <style>
    body { font-family: system-ui, sans-serif; background-color: #f3f4f6; }
    .card { background-color: #ffffff; padding: 16px; border-radius: 8px; margin-bottom: 12px; }
    .notice { background-color: #fef3c7; padding: 12px 16px; }
    mark { background-color: #bbf7d0; }
  </style>
</head>
<body>
  <div class="card">A white card on a light gray page.</div>
  <div class="notice">An amber notice.</div>
  <p>A <mark>highlighted phrase</mark> inside a sentence.</p>
  <p><span style="background-color: #2563eb; color: white; padding: 2px 6px;">inline style</span></p>
</body>
</html>

Warna halaman diatur di body, kartu dan pemberitahuan di div masing-masing, dan sorotan di sebuah elemen inline. Elemen inline hanya mendapat background di belakang teksnya, baris demi baris.

Warna background seluruh halaman

Taruh background-color di body. Jika elemen <html> tidak punya background sendiri, browser mewarnai seluruh jendela dengan background milik body, bahkan di bagian setelah konten body berakhir:

body {
  background-color: #111827;
  color: #f9fafb; /* change the text color too, for contrast */
}

Cara lama di HTML adalah <body bgcolor="black">. Atribut bgcolor sudah usang di semua elemen, jadi pakailah CSS. Browser masih mengikutinya demi halaman lama, itulah sebabnya atribut ini kadang terlihat berfungsi.

Background transparan

Setiap elemen dimulai dengan background-color: transparent, jadi kamu melihat elemen induk di belakangnya. Untuk memberi warna tipis pada kotak tapi tetap tembus pandang, pakai warna dengan alpha channel:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transparent background</title>
  <style>
    body {
      font-family: system-ui, sans-serif; font-weight: 600; padding: 12px;
      background: repeating-linear-gradient(45deg, #bfdbfe 0 12px, #ffffff 12px 24px);
    }
    .box { padding: 16px; margin-bottom: 10px; color: #111827; }
    .none { background-color: transparent; border: 2px dashed #111827; }
    .tint { background-color: rgb(245 158 11 / 50%); }
    .solid { background-color: rgb(245 158 11); }
  </style>
</head>
<body>
  <div class="box none">transparent (the default)</div>
  <div class="box tint" id="tint">rgb(245 158 11 / 50%)</div>
  <div class="box solid">rgb(245 158 11)</div>
</body>
</html>

opacity: 0.5 juga akan membuat garis-garis di belakang terlihat, tetapi ikut memudarkan teksnya. Untuk background tembus pandang dengan teks yang tetap pekat, pakai warna dengan alpha. Halaman warna berisi semua cara menuliskannya.

Di mana warna dilukis

Secara default, background mencapai tepi luar border (jadi warnanya terlihat di sela border putus-putus atau semi transparan). background-clip mengubah hal itu:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>background-clip</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .box {
      display: inline-block; margin: 6px; padding: 16px;
      border: 8px dashed #111827;
      background-color: #f59e0b;
    }
    .padding { background-clip: padding-box; }
    .content { background-clip: content-box; }
  </style>
</head>
<body>
  <div class="box">border-box</div>
  <div class="box padding">padding-box</div>
  <div class="box content">content-box</div>
</body>
</html>

Di kotak pertama, warna kuning tua terlihat di antara garis putus-putus. Di kotak kedua, warnanya berhenti di tepi dalam border, dan di kotak ketiga hanya area konten yang diwarnai. Margin tidak pernah diwarnai: margin selalu transparan.

Baris tabel berselang-seling

Background pada setiap baris kedua membuat tabel yang lebar lebih mudah dibaca sekilas:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Striped rows</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    table { border-collapse: collapse; width: 100%; }
    th, td { padding: 8px 12px; text-align: start; }
    thead { background-color: #1f2937; color: white; }
    tbody tr:nth-child(even) { background-color: #f3f4f6; }
    tbody tr:hover { background-color: #dbeafe; }
  </style>
</head>
<body>
  <table>
    <thead><tr><th>Name</th><th>Role</th></tr></thead>
    <tbody>
      <tr><td>Ada</td><td>Engineer</td></tr>
      <tr><td>Grace</td><td>Admiral</td></tr>
      <tr><td>Alan</td><td>Mathematician</td></tr>
      <tr><td>Katherine</td><td>Physicist</td></tr>
    </tbody>
  </table>
</body>
</html>

background-color vs shorthand background

background mengatur semua properti background sekaligus. Bagian yang tidak kamu tulis kembali ke nilai default-nya, dan ini sering menjebak:

.hero {
  background-image: linear-gradient(#2563eb, #1e40af);
  background: #111827;          /* also resets background-image to none */
}

.hero {
  background-image: linear-gradient(#2563eb, #1e40af);
  background-color: #111827;    /* only the color; the gradient stays */
}

Pakai background-color jika yang kamu maksud hanya warna. Pakai background jika kamu mengatur seluruh background di satu tempat, sering kali warna sekaligus gambar; lihat background-image.

Aksesibilitas: pasangkan dengan warna teks

Warna background hanya bisa dibaca jika dipasangkan dengan warna teksnya. Setiap kali kamu mengatur salah satunya, periksa yang lain: WCAG meminta rasio kontras minimal 4.5:1 untuk teks isi. Background gelap perlu warna teks terang yang diatur secara eksplisit, karena teks tetap memakai warna gelap yang diwarisinya.

Kesalahan umum

• Memakai bgcolor. Atribut ini sudah usang. Pakai background-color.
• Memakai opacity untuk background tembus pandang. Kontennya ikut memudar. Pakai warna dengan alpha.
• Shorthand background setelah background-image. Shorthand itu mengatur ulang gambarnya. Tulis background-color saja.
• Berharap margin menampilkan warna. Margin berada di luar background. Pakai padding untuk ruang yang berwarna.
• Background gelap dengan teks default. Atur juga color yang terang.