Coba bayangin nulis tinta hitam di kertas hitam — gak akan kebaca. Itu pelajaran fundamental kontras: warna teks (color) dan warna latar (background-color) harus kerjasama biar mata user gak capek. Background bukan cuma soal estetika; dia infrastructure penting buat keterbacaan.

🤔 Tahukah kamu? Standar WCAG (aksesibilitas web) wajibin kontras minimum 4.5:1 antara teks dan background buat teks normal. Pake DevTools color picker bisa cek otomatis — banyak website populer masih sering gagal aturan dasar ini.

Berikut contoh penggunaan properti background-color:

background-color: rgb(0, 240, 10);

Format warna sama persis kayak color (named, hex, rgb, hsl) — yang beda cuma target.

🎭 Analogi sehari-hari

color = warna tinta pena, background-color = warna kertas. Tinta hitam di kertas putih = jelas. Tinta abu di kertas abu = pusing baca.

⚠️ Jebakan yang sering ditemui

• background shorthand override semua background-* — background: red reset background-image jadi none. Pakai property spesifik kalau cuma mau ubah warna.
• background-image: url(...) butuh ukuran — kadang perlu set background-size: cover agar tidak tile (repeat).
• background-attachment: fixed = parallax effect tapi performance buruk di mobile.
• Transparent background ≠ no background — background: transparent masih membutuhkan computation.
• Background tidak ke-print default — browser hemat tinta. print-color-adjust: exact paksa cetak background.
• Multiple backgrounds dipisah koma — yang pertama di atas, terakhir di belakang.

🎯 Background pakai apa — color, image, gradient, atau combo?

• Solid warna (button bg, card bg) → background-color: ... (sederhana, cepat)
• Foto/pattern dari file (hero banner, texture) → background-image: url(...) + background-size
• Smooth color transition (CTA button, hero section) → background: linear-gradient(...) (gak butuh image, flexible)
• Pattern repeat (grid lines, dots) → CSS gradient repeat (repeating-linear-gradient) lebih efisien dari image
• Image + overlay gelap untuk readability text → multiple background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url(foto.jpg)
• Animated → gradient + background-size + animation background-position

Aturan: gradient lebih hemat dari image kalau visualnya bisa dicapai pakai code. Solid color untuk komponen kecil. Image untuk content yang gak bisa di-CSS-ifikasi.