Abd. Asis

Warna di CSS tidak hanya soal teks. Di bab sebelumnya kita belajar cara mengekspresikan warna dalam berbagai format — HEX, RGB, HSL, dan variasinya. Sekarang saatnya melihat bagaimana warna-warna itu diterapkan ke lapisan paling dasar dari sebuah elemen: latar belakangnya.

Background adalah kanvas tempat semua konten lain berdiri. Browser memberikan setiap elemen background yang transparan secara default, sehingga warna putih yang kamu lihat di halaman kosong sebenarnya berasal dari background <body> — bukan dari elemen-elemen di dalamnya. Begitu kamu memahami cara kerja background, kamu bisa mengontrol salah satu aspek paling mendasar dari tampilan halaman web.

Background Warna

Properti background-color menerima semua format warna yang sudah kita pelajari di Bab 8 — nama warna, HEX, RGB, HSL, dan variasinya dengan alpha channel.

/* profil.css */

.halaman-utama {
  background-color: #f8fafc;
}

.panel-informasi {
  background-color: hsl(210, 40%, 96%);
}

.label-status {
  background-color: rgb(220, 252, 231);
  color: rgb(21, 128, 61);
}

Yang menarik adalah background-color berlaku untuk seluruh area yang ditempati elemen — termasuk padding, tapi tidak termasuk margin. Ini konsisten dengan cara Box Model bekerja: padding adalah bagian "dalam" elemen, sedangkan margin adalah ruang di luarnya.

Transparansi dengan RGBA

Ketika kamu ingin background yang tembus pandang, RGBA adalah pilihan yang tepat. Nilai alpha keempat mengontrol seberapa transparan warnanya.

/* profil.css */

.overlay-kartu {
  background-color: rgba(26, 39, 68, 0.75);  /* biru gelap, 75% padat */
}

.notif-sukses {
  background-color: rgba(34, 197, 94, 0.15);  /* hijau transparan */
  border: 1px solid rgba(34, 197, 94, 0.4);
}

Berbeda dengan properti opacity yang membuat seluruh elemen dan semua konten di dalamnya menjadi transparan, RGBA hanya membuat warna background saja yang transparan. Teks di dalam elemen tetap terlihat penuh tanpa terpengaruh.

Background Gambar

Selain warna, background sebuah elemen juga bisa berupa gambar. Properti background-image menerima path gambar yang dibungkus dalam fungsi url().

/* profil.css */

.banner-atas {
  background-image: url("/assets/images/tekstur-kertas.jpg");
  min-height: 200px;
}

.header-profil {
  background-image: url("/assets/images/pola-geometri.png");
  padding: 40px;
}

Perilaku default background-image adalah mengulang gambar secara horizontal dan vertikal hingga memenuhi seluruh area elemen — seperti ubin yang dipasang tanpa batas. Ini berguna untuk tekstur atau pola, tapi bisa menjadi masalah untuk foto atau ilustrasi tunggal.

Selalu pastikan gambar background tidak mengganggu keterbacaan teks di atasnya. Foto dengan banyak detail atau kontras tinggi sering membuat teks sulit dibaca. Gunakan overlay RGBA atau pilih gambar dengan area yang cukup "tenang" di area teks.

Mengontrol Pengulangan Gambar

Properti background-repeat menentukan bagaimana browser mengulang gambar background. Ada beberapa nilai yang bisa digunakan:

Nilai	Perilaku
`repeat`	Ulang ke semua arah (default)
`repeat-x`	Ulang horizontal saja
`repeat-y`	Ulang vertikal saja
`no-repeat`	Tampilkan sekali tanpa pengulangan
`space`	Ulang dengan spasi merata di antara gambar
`round`	Ulang dengan skala gambar agar pas

Dalam praktiknya, no-repeat adalah nilai yang paling sering digunakan — terutama ketika gambar background adalah ilustrasi atau foto yang ingin ditampilkan satu kali.

/* profil.css */

/* pola garis horizontal — ulangi ke samping saja */
.pembagi-section {
  background-image: url("/assets/images/garis-halus.png");
  background-repeat: repeat-x;
  height: 4px;
}

/* foto satu kali di pojok kanan bawah */
.panel-profil {
  background-image: url("/assets/images/ilustrasi-kecil.svg");
  background-repeat: no-repeat;
  background-position: right bottom;
  min-height: 180px;
}

Posisi Gambar Background

Ketika background-repeat diatur ke no-repeat, gambar akan muncul di pojok kiri atas secara default. Properti background-position memungkinkan kamu memindahkannya ke posisi lain.

Posisi bisa ditulis dengan kata kunci atau koordinat numerik:

/* profil.css */

/* kata kunci: top, center, bottom, left, right */
.kartu-fitur {
  background-image: url("/assets/images/ikon-dekorasi.svg");
  background-repeat: no-repeat;
  background-position: right center;
}

/* koordinat: x y */
.banner-promo {
  background-image: url("/assets/images/bentuk-dekoratif.png");
  background-repeat: no-repeat;
  background-position: 80% 20%;
}

/* pixel: jarak dari kiri dan atas */
.panel-khusus {
  background-image: url("/assets/images/aksen-pojok.png");
  background-repeat: no-repeat;
  background-position: 16px 16px;
}

Kata kunci horizontal dan vertikal dikombinasikan — right center artinya gambar diletakkan di tengah secara vertikal, di sisi kanan secara horizontal. Urutan penulisannya selalu horizontal dulu, baru vertikal.

Attachment: Scroll atau Fixed

Properti background-attachment menentukan apakah gambar background ikut bergerak saat halaman di-scroll, atau tetap diam di posisinya.

/* profil.css */

/* default: gambar ikut scroll bersama konten */
.section-biasa {
  background-image: url("/assets/images/tekstur-lembut.jpg");
  background-attachment: scroll;
}

/* fixed: gambar diam, konten bergerak di atasnya */
.hero-parallax {
  background-image: url("/assets/images/foto-pemandangan.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 400px;
}

Nilai fixed menciptakan efek parallax sederhana — saat user men-scroll, konten bergerak tapi gambar background tetap di tempat. Efek ini terasa seperti melihat melalui jendela ke pemandangan yang diam di baliknya.

background-attachment: fixed memiliki masalah performa di perangkat mobile. Browser mobile sering menonaktifkan efek ini atau membuatnya berperilaku tidak konsisten. Gunakan dengan hati-hati jika halaman harus responsif.

Shorthand Background

Daripada menulis setiap properti background secara terpisah, CSS menyediakan shorthand background yang menggabungkan semuanya dalam satu deklarasi.

Urutan penulisannya:

background: [color] [image] [repeat] [position] / [size] [attachment]

Kamu tidak perlu mencantumkan semua nilai — cukup tuliskan yang dibutuhkan, sisanya akan menggunakan nilai default.

/* profil.css */

/* hanya warna */
.area-konten {
  background: #f1f5f9;
}

/* warna + gambar + repeat + posisi */
.banner-atas {
  background: #1a2744 url("/assets/images/pola-titik.png") no-repeat right top;
}

/* tanpa warna, gambar fixed di tengah */
.hero-parallax {
  background: url("/assets/images/foto-hero.jpg") center/cover no-repeat fixed;
}

Perhatikan baris terakhir: center/cover adalah cara menulis background-position dan background-size secara bersamaan dalam shorthand. Tanda / memisahkan keduanya. cover berarti gambar akan diskalakan untuk memenuhi seluruh area tanpa memotong rasio aspek — salah satu nilai yang paling berguna untuk foto hero.

Perbandingan: Shorthand vs Longhand

Dua blok kode berikut menghasilkan hasil yang persis sama:

/* longhand — lebih verbose, lebih mudah dibaca */
.kartu-profil {
  background-color: #1e3a5f;
  background-image: url("/assets/images/pola-garis.svg");
  background-repeat: repeat-x;
  background-position: bottom center;
  background-attachment: scroll;
}

/* shorthand — ringkas, cocok setelah kamu hafal urutannya */
.kartu-profil {
  background: #1e3a5f url("/assets/images/pola-garis.svg") repeat-x bottom center;
}

Pilih longhand ketika kode perlu mudah dibaca oleh orang lain atau ketika kamu sedang bereksperimen dan sering mengubah satu nilai. Gunakan shorthand ketika nilai-nilainya sudah final dan kamu ingin membuat file CSS lebih ringkas.

Latihan

Buat file background-latihan.css dan terapkan tiga skenario berikut menggunakan proyek portofolio yang sudah kita mulai:

Buat kelas .hero-section dengan background gambar yang memenuhi seluruh area, tidak berulang, dan diposisikan di tengah. Tambahkan juga background-color sebagai fallback ketika gambar tidak berhasil dimuat.
Buat kelas .pola-header menggunakan gambar background yang hanya berulang secara horizontal. Atur tinggi minimal 60px dan padding yang cukup agar teks tidak menempel di tepi.
Tulis ulang .hero-section dari latihan pertama menggunakan shorthand background dalam satu baris. Bandingkan keterbacaan keduanya — mana yang lebih mudah dipahami ketika kamu membaca kembali setelah beberapa hari?

Background sudah terkendali. Sejauh ini kita sudah bisa mewarnai teks, mengisi latar belakang dengan warna maupun gambar, dan mengontrol bagaimana keduanya berinteraksi. Yang belum kita sentuh adalah batas luar elemen — garis yang memisahkan satu elemen dari elemen lain di sekitarnya. Itu yang akan kita pelajari berikutnya: border.

BAB 9: Background CSS

Background Warna

Transparansi dengan RGBA

Background Gambar

Mengontrol Pengulangan Gambar

Posisi Gambar Background

Attachment: Scroll atau Fixed

Shorthand Background

Perbandingan: Shorthand vs Longhand

Latihan

Referensi