Background Images

Selain warna, latar elemen dapat berisi gambar: foto, ikon, pola berulang, atau tekstur. Properti background-image menerima satu atau beberapa gambar sekaligus, dan browser menggambar lapisan itu di bawah isi elemen. Gambar latar berbeda dari elemen <img>: ia tidak masuk struktur dokumen, tidak dapat difokuskan, dan ukurannya sepenuhnya kita kendalikan lewat CSS. Pada Chapter ini kita memuat gambar, mengatur ukurannya, lalu mengendalikan pengulangan dan posisi.

Memuat Gambar dengan url() #

Nilai gambar ditulis di dalam url(), baik berupa path file (url("foto.jpg")), URL lengkap, maupun data URI — gambar yang ditempel langsung ke dalam CSS. Contoh pada chapter ini memakai data URI berformat SVG agar demo tetap mandiri tanpa file gambar tambahan:

/* Latar gambar dengan data URI SVG */
.gambar-polos {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Crect width='120' height='120' fill='%23e0f2fe'/%3E%3Ccircle cx='60' cy='60' r='40' fill='%230ea5e9'/%3E%3C/svg%3E");
}
.gambar-pemandangan {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300'%3E%3Crect width='400' height='300' fill='%23bae6fd'/%3E%3Ccircle cx='320' cy='64' r='34' fill='%23fbbf24'/%3E%3Cpath d='M0 300L120 140L210 240L280 170L400 300Z' fill='%23166534'/%3E%3C/svg%3E");
}
.panel {
  background-color: rgb(255 255 255);
  border: 1px solid rgb(226 232 240);
  border-radius: 8px;
  height: 140px;
  margin-bottom: 12px;
}
.ukuran-px   { background-size: 120px 120px; background-repeat: no-repeat; }
.isi-cover   { background-size: cover; background-repeat: no-repeat; background-position: center; }
.isi-contain { background-size: contain; background-repeat: no-repeat; background-position: center; }
.berulang    { background-repeat: repeat; }
.tunggal     { background-repeat: no-repeat; background-position: center bottom; background-size: 96px 96px; }

Mari kita telaah bagian pentingnya:

1. Baris 3 (.gambar-polos): url() membungkus data URI SVG berukuran 120×120 — sebuah lingkaran biru di atas kotak biru muda. Karakter seperti < dan # di-escape menjadi %3C dan %23 agar sah sebagai URI.
2. Baris 7 (.gambar-pemandangan): gambar kedua berukuran 400×300 untuk membandingkan perilaku cover dan contain.
3. Baris 11–16 (.panel): setiap panel berukuran tinggi 140px dengan latar putih, sehingga gambar di atasnya jelas terlihat.
4. Baris 17 (.ukuran-px): gambar dipaksa berukuran 120px dan no-repeat menampilkan satu salinan saja.

Hasil di Browser:

Lima panel tampil bertumpuk. Panel pertama memuat satu lingkaran
berukuran 120px di pojok kiri atas (computed background-size:
"120px 120px"). Panel kedua memenuhi seluruh panel dengan
pemandangan (background-size: "cover"), panel ketiga menampilkan
pemandangan utuh di tengah (background-size: "contain"). Panel
keempat dan kelima menunjukkan perbedaan repeat dan no-repeat.
Panel posisi menaruh lingkaran di tengah bawah (background-position
terbaca "50% 100%"), dan panel tanpa gambar terbaca
background-image: none.

Ukuran: background-size #

Properti background-size menerima panjang eksplisit, persentase, atau dua kata kunci penting:

Kapan pun gambar latar berfungsi sebagai “hero” — foto yang harus memenuhi kartu — pilihannya umumnya cover dikombinasikan dengan background-position: center agar bagian tengah foto yang tetap terlihat.

Pengulangan dan Posisi #

Secara bawaan gambar latar berulang mengisi seluruh area — perilaku background-repeat bernilai repeat. Pola kecil seperti titik-titik atau garis sengaja dibuat berulang, sedangkan foto biasanya diberi no-repeat. Nilai lainnya seperti repeat-x dan repeat-y membatasi pengulangan pada satu arah saja.

Sisa area kosong diatur oleh background-position : kata kunci (center, left, bottom), persentase, atau panjang seperti 20px 40px. Nilai computed dilaporkan sebagai pasangan — center bottom terbaca 50% 100%.

Data URI dan Pertimbangan Pemuatan #

Data URI menempelkan isi file langsung ke dalam CSS, sehingga browser tidak perlu mengirim permintaan jaringan tambahan. Keuntungannya nyata untuk gambar kecil: ikon dan pola satu warna tampil seketika tanpa menunggu unduhan. Konsekuensinya, gambar tersebut tidak ter-cache sebagai berkas terpisah dan menambah ukuran CSS yang harus diunduh lebih dulu oleh browser — untuk foto besar, file terpisah tetap pilihan yang lebih tepat.

Penulisan data URI menuntut kehati-hatian pada karakter khusus. Tanda # wajib ditulis %23 karena tanda pagar menandai fragment URI, karakter < dan > ditulis %3C dan %3E, dan spasi sebaiknya dihindari bila URI tidak dibungkus kutip. Kesalahan escape paling sering berujung pada gambar yang gagal termuat tanpa pesan yang jelas.

Terakhir, ingat peran gambar latar di dalam struktur dokumen: gambar latar tidak membawa teks alternatif dan tidak terbaca oleh pembaca layar. Gunakan untuk dekorasi dan lapisan visual; gunakan elemen <img> bila gambar merupakan konten yang bermakna.

Demo chapter ini membawa tujuh penanda data-expected yang memeriksa background-size, background-repeat, background-position, dan background-image pada panel-panel di atas.

/* Latar gambar dengan data URI SVG */
.gambar-polos {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Crect width='120' height='120' fill='%23e0f2fe'/%3E%3Ccircle cx='60' cy='60' r='40' fill='%230ea5e9'/%3E%3C/svg%3E");
}
.gambar-pemandangan {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300'%3E%3Crect width='400' height='300' fill='%23bae6fd'/%3E%3Ccircle cx='320' cy='64' r='34' fill='%23fbbf24'/%3E%3Cpath d='M0 300L120 140L210 240L280 170L400 300Z' fill='%23166534'/%3E%3C/svg%3E");
}
.panel {
  background-color: rgb(255 255 255);
  border: 1px solid rgb(226 232 240);
  border-radius: 8px;
  height: 140px;
  margin-bottom: 12px;
}
.ukuran-px   { background-size: 120px 120px; background-repeat: no-repeat; }
.isi-cover   { background-size: cover; background-repeat: no-repeat; background-position: center; }
.isi-contain { background-size: contain; background-repeat: no-repeat; background-position: center; }
.berulang    { background-repeat: repeat; }
.tunggal     { background-repeat: no-repeat; background-position: center bottom; background-size: 96px 96px; }