Sejauh ini latar yang kita isi berupa warna datar. CSS bisa lebih jauh: property background-image menempelkan gambar di belakang konten — berupa berkas, teks terenkode, bahkan gradien — tanpa perlu menambah satu elemen HTML pun. Karena gambar ini hidup di belakang konten dan tidak masuk alur dokumen, kita perlu memahami cara browser menggambarnya: dari mana ukurannya, area mana yang dicat, dan bagaimana beberapa lapisan bertumpuk. Semua itu topik chapter ini, dan fondasi bagi tiga chapter berikutnya tentang ukuran, posisi, dan pengulangan.

Memasang Gambar dengan url() #

css 
.panel-sambutan {
  background-image: url("pola-diagonal.svg");
}

Demo berikut memakai pola diagonal dari repeating-linear-gradient() sebagai pengganti berkas SVG:

Tiga hal perlu kita pegang sejak awal:

  • Nilai awal background-image adalah none; gambar hanya muncul setelah kita menuliskannya.
  • Alamat di dalam url() yang relatif dihitung dari lokasi berkas CSS, bukan dari halaman HTML.
  • Gambar background murni dekoratif: ia tidak memiliki alt, tidak masuk alur dokumen, dan tidak dibacakan screen reader. Untuk gambar yang bermakna informasi, tetap gunakan <img> dengan alt.

Area yang Dicat #

Gambar background digambar di area konten dan padding, lalu secara default merambat sampai ke tepi luar border. Bila border elemen pekat, perambatan ini tak terlihat; bila border transparan atau semi transparan, gambar ikut muncul di bawahnya.

Gradien adalah Gambar Juga #

Fungsi gradien seperti linear-gradient() mengembalikan nilai image — sama seperti hasil url(). Karena itu gradien bisa dipasang ke mana pun background-image dipakai, tanpa satu pun berkas gambar:

css 
.banner-daftar {
  background-image: linear-gradient(160deg, #1f6f54, #14503a);
}

Anatomi linear-gradient — sudut, arah, dan stop warnanya — kita bedah tuntas pada chapter Linear-Gradient; di sini gradien cukup diperlakukan sebagai bahan lapisan.

background-image menerima beberapa nilai yang dipisah koma. Urutannya menentukan tumpukan: nilai pertama digambar paling atas.

css 
.banner-berpola {
  background-image: url("pola-titik.svg"), linear-gradient(160deg, #1f6f54, #14503a);
  background-color: #14503a;
}

Mari kita uraikan baris demi baris:

  1. url("pola-titik.svg") — lapisan pertama dan teratas: pola titik transparan yang tampak di atas segalanya.
  2. linear-gradient(160deg, ...) — lapisan kedua, digambar di bawah pola titik dan di atas warna dasar.
  3. background-color: #14503a — bukan anggota daftar lapisan; warna ini selalu digambar paling bawah, berfungsi sebagai dasar sekaligus fallback bila kedua gambar gagal dimuat.

Dua kartu berikut membandingkan kondisi fallback dengan tumpukan lengkap:

Salah menulis urutan berarti pola tertutup gradien di atasnya — lapisan teratas yang salah tampil.

Karena demo di course ini tidak memuat berkas gambar terpisah, kita manfaatkan data URI: gambar yang ditulis langsung sebagai teks terenkode di dalam url(). Bentuknya panjang, tetapi strukturnya sederhana:

css 
.pola-titik {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='5' fill='%23ffffff' fill-opacity='0.4'/%3E%3C/svg%3E");
}

Tiga aturan membaca data URI di atas:

  • %3C mewakili <, %3E mewakili >, dan %23 mewakili # — karakter-karakter ini wajib dienkode di dalam URL.
  • Atribut di dalam SVG memakai kutip tunggal agar tidak bertabrakan dengan kutip ganda pembungkus url().
  • Selama url() dibungkus kutip, spasi di dalam data URI aman ditulis apa adanya.

Data URI sangat praktis untuk pola kecil: tanpa permintaan jaringan tambahan, tanpa berkas yang bisa hilang, dan seluruh gambarnya terbaca langsung di berkas CSS.

Kesalahan Umum #

KesalahanAkibatnyaPerbaikannya
Menulis background-image lalu shorthand background sesudahnyaShorthand mereset image kembali ke noneTulis shorthand lebih dulu, atau jangan campur keduanya
Salah urutan lapisan pada daftar komaPola tertutup gradien di atasnyaIngat: nilai pertama digambar paling atas
Tidak menyediakan background-colorKonten sulit dibaca bila gambar gagalSelalu sediakan warna dasar senada di bawah gambar
Menaruh foto bermakna sebagai background-imageTanpa alt, informasi tak sampai ke screen readerGunakan <img> untuk gambar yang informatif

Ringkasan #

background-image menempelkan gambar di belakang konten: berkas lewat url(), data URI, maupun gradien — semuanya diperlakukan sebagai image yang bisa ditumpuk beberapa lapis. Nilai pertama berada paling atas, dan background-color selalu menjadi dasarnya. Gambar yang sudah terpasang masih menyisakan dua pertanyaan besar: seberapa besar ia digambar dan di titik mana ia diletakkan. Dua chapter berikutnya menjawabnya secara berurutan lewat background-size lalu background-position.