Satu elemen dapat memuat lebih dari satu gambar latar sekaligus. Kita cukup memisahkan setiap lapisan dengan tanda koma pada background-image, dan browser menggambarnya bertumpuk: lapisan pertama berada paling atas, lapisan berikutnya di bawahnya, hingga warna background-color yang selalu menjadi dasar paling bawah. Pola ini menggantikan kebutuhan elemen pembungkus tambahan untuk kasus umum seperti panel gelap semi transparan di atas foto, atau pola berulang di bawah gradient. Referensi lengkapnya ada pada MDN: Using multiple backgrounds .

Urutan Layer: Pertama Berarti Teratas #

Contoh berikut menumpuk dua lapisan pada satu panel: gradient biru yang menggelap ke bawah sebagai lapisan atas, dan pola lingkaran berulang sebagai lapisan bawah:

css 
.panel-utama {
  background-color: rgb(255 255 255);
  background-image:
    linear-gradient(to bottom, rgb(2 132 199 / 0%), rgb(2 132 199 / 85%)),
    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");
  background-repeat: no-repeat, repeat;
  background-size: auto, 120px 120px;
  background-position: center, left top;
}

Mari kita telaah aturan tumpukannya:

  1. Baris 3–4 (background-image): gradient ditulis lebih dulu sehingga menjadi lapisan teratas; gambar pola menjadi lapisan kedua di bawahnya. Gradient atasnya sepenuhnya transparan (0%) dan menggelap ke 85%, sehingga pola masih terlihat di bagian atas panel.
  2. Baris 5 (background-repeat): daftar nilainya mengikuti urutan layer — gradient diberi no-repeat, pola diberi repeat, dipisahkan koma.
  3. Baris 6 (background-size): gradient tidak punya ukuran alami sehingga auto berarti memenuhi panel; pola dipaksa 120px. Bila daftar lebih pendek daripada jumlah layer, browser mengulanginya dari awal.
  4. Baris 7 (background-position): center untuk gradient dan left top untuk pola; nilai computed dilaporkan sebagai pasangan per layer.

Hasil di Browser:

text 
Panel tampil dengan pola lingkaran yang jelas di bagian atas, lalu
tenggelam ke biru tua di bagian bawah karena lapisan gradient.
Computed yang diperiksa harness: background-repeat "no-repeat,
repeat", background-size "auto, 120px 120px", dan
background-position "50% 50%, 0% 0%".

background Shorthand untuk Banyak Layer #

Shorthand background menerima banyak layer sekaligus — setiap layer menuliskan posisi dan ukuran dengan pemisah garis miring:

css 
.panel-shorthand {
  background:
    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")
    no-repeat center / cover,
    linear-gradient(to top, rgb(2 132 199), rgb(125 211 252)) repeat-x;
}

Hasil di Browser:

text 
Panel tampil dengan pola lingkaran tunggal yang memenuhi panel
(cover) di atas pita gradient berulang. Computed yang diperiksa:
background-repeat "no-repeat, repeat-x", background-size
"cover, auto", dan background-color "rgba(0, 0, 0, 0)" — shorthand
yang tidak menyebut warna mengatur latar kembali ke transparent.

Daftar Nilai Lebih Pendek dari Jumlah Layer #

Setiap properti latar menerima daftar nilai yang dipetakan ke layer berdasarkan urutan. Bila daftarnya lebih pendek daripada jumlah layer, browser mengulang daftar dari awal: dua layer dengan background-repeat: no-repeat berarti kedua layer sama-sama no-repeat, sedangkan no-repeat, repeat menyatakan nilainya per layer secara eksplisit. Menulis daftar lengkap memang lebih panjang, tetapi membuat niat kita terbaca tanpa harus menghitung pengulangan di kepala.

Wadah background-color berperan sebagai lapisan paling bawah yang tidak ikut dalam daftar: ia selalu berada di bawah semua gambar. Pola yang sering dipakai adalah pola berlubang — gambar SVG transparan di atas warna dasar — sehingga satu warna token dapat mengubah keseluruhan tampilan pola hanya dengan mengganti background-color.

Saat menyusun tumpukan lapisan yang mulai ramai, panel DevTools membantu: hapus centang pada background-image untuk melihat lapisan di bawahnya satu per satu, atau geser urutan deklarasi untuk membuktikan lapisan mana yang terlihat paling atas.

Kapan Memakai Layer Ganda #

Beberapa pola yang wajar memakai multiple backgrounds: overlay gradient di atas foto agar teks putih tetap terbaca; pola tekstur tipis di atas warna dasar; atau dekorasi sudut berupa dua ikon di pojok berlawanan. Untuk konten yang bermakna — foto produk, diagram — elemen <img> tetap pilihan yang lebih tepat karena terbaca oleh pembaca layar dan masuk struktur dokumen.

Demo chapter ini membawa dua panel utama dengan enam penanda data-expected pada properti background-repeat, background-size, background-position, dan background-color, plus satu panel pembanding yang menempatkan pola transparan di atas warna dasar.