Cara Memberi Warna Latar Belakang dengan CSS

Halo teman-teman!
Setelah sebelumnya kita belajar tentang warna HSL dan HSLA, sekarang kita lanjut ke sesuatu yang sering banget kita pakai dalam CSS, yaitu memberi warna latar belakang dengan properti background-color.

Bayangkan kamu lagi bikin lukisan digital. Sebelum mulai menggambar, tentu kita butuh kanvas — nah, warna latar inilah kanvasnya. Dengan CSS, kita bisa bikin setiap elemen HTML tampil beda lewat warna latar yang menarik.

Apa Itu background-color?

background-color adalah properti di CSS yang digunakan untuk mengatur warna latar belakang suatu elemen HTML. Elemen apapun bisa kita beri warna latar — mulai dari body halaman, paragraf, header, tombol, sampai div kecil.

Contoh sederhana:

body {
  background-color: lightblue;
}

Kalau diterapkan ke HTML:

<body>
  <h1>Selamat datang!</h1>
</body>

Maka seluruh latar halaman akan berubah jadi biru muda. Simpel, kan?

Format Warna yang Bisa Kita Gunakan

Untuk menetapkan warna di background-color, kita bisa pakai beberapa jenis format warna:

Nama warna CSS:
```
div {
  background-color: coral;
}
```
Kode Hex:
```
div {
  background-color: #ffcc00;
}
```

RGB:

div {
  background-color: rgb(255, 0, 0);
}

RGBA (dengan transparansi):

div {
  background-color: rgba(0, 0, 0, 0.5);
}

HSL dan HSLA:

div {
  background-color: hsla(180, 100%, 50%, 0.3);
}

Jadi kamu bisa sesuaikan dengan kebutuhan desain kamu. Mau warna solid? Pakai hex atau nama warna. Mau efek transparan? Pakai RGBA atau HSLA.

Transparansi pada background-color

Kadang kita ingin warna latar yang sedikit transparan, supaya elemen di bawahnya tetap kelihatan. Nah, di sinilah kita pakai RGBA atau HSLA.

Contoh efek semi-transparan:

.overlay {
  background-color: rgba(255, 255, 255, 0.6);
}

Ini akan memberikan efek putih setengah transparan yang keren buat lapisan atas gambar atau konten lainnya.

Contoh Kombinasi CSS dengan background-color

.container {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.button {
  background-color: #007bff;
  color: white;
  padding: 10px 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.button:hover {
  background-color: #0056b3;
}

Dengan styling seperti ini, tampilan web kamu jadi lebih menarik dan profesional.

Tips Memilih Warna Latar

Pastikan teks tetap mudah dibaca (kontras penting!)
Gunakan warna cerah untuk alert atau highlight
Gunakan warna lembut untuk latar konten utama
Jangan lupa uji kombinasi warna di perangkat berbeda

Yuk Coba Sendiri!

Sekarang giliran kamu untuk eksplorasi! Buka editor HTML dan CSS kamu, lalu coba tambahkan warna latar ke berbagai elemen. Coba berbagai format warna, dari nama warna, hex, RGB, hingga RGBA atau HSL. Bandingkan hasilnya dan lihat mana yang paling cocok buat proyekmu.

Dengan memahami cara kerja background-color, kamu sudah selangkah lebih dekat untuk bikin tampilan website yang keren dan nyaman dilihat.

Di materi selanjutnya, kita akan belajar gimana caranya menambahkan gambar sebagai latar belakang elemen HTML dengan background-image.