Multiple Backgrounds

Satu elemen tidak terbatas pada satu latar. CSS memperbolehkan beberapa lapisan background dalam satu deklarasi, dipisah tanda koma — pola yang dipakai untuk selubung gelap di atas foto, aksen dekoratif di pojok kartu, dan banner yang tersusun dari beberapa tekstur. Pada chapter ini kita belajar menumpuk lapisan dengan urutan yang benar, mengatur posisi dan ukuran tiap lapisan secara terpisah, menghindari jebakan shorthand background, serta menyusun lapisan cadangan agar tampilan tetap utuh.

Menumpuk Lapisan dengan Koma #

.banner-promo {
  background-image: linear-gradient(to right, rgba(20, 80, 58, 0.88), rgba(20, 80, 58, 0.35)), repeating-linear-gradient(90deg, #1f6f54 0 18px, #14503a 18px 36px);
}

Mari kita baca isinya:

1. Lapisan pertama — selubung gradasi semi transparan. Lapisan ini berada paling atas.
2. Lapisan kedua — pola garis hijau yang berulang. Lapisan ini menjadi dasar paling bawah.

Aturan membacanya satu dan perlu melekat: lapisan pertama menempati posisi teratas. Browser melukis latar mulai dari lapisan terakhir menuju lapisan pertama, sehingga lapisan pertama yang dilukis paling akhir dan menutupi yang lain. Kebanyakan orang mengira urutannya sebaliknya, karena kebiasaan membaca daftar dari atas ke bawah.

Selubung semi transparan di atas pola garis adalah susunan yang dipakai banner berikut:

Bila urutan daftar dibalik, titik kuning akan tertutup pola dan selubung sekaligus.

Mengatur Setiap Lapisan Secara Terpisah #

background-position, background-size, dan background-repeat juga menerima daftar bernilai koma. Nilai ke-n berlaku untuk lapisan ke-n:

.kartu-aksen {
  background-image: radial-gradient(circle at 26px 26px, #f4b942 0 20px, rgba(244, 185, 66, 0) 21px), linear-gradient(to bottom, #e7f4ec, #fdfaf3);
  background-size: 96px 96px, auto;
  background-repeat: no-repeat, no-repeat;
  background-position: top right, center;
}

1. Lapisan pertama adalah titik kuning kecil sebagai aksen pojok: ukurannya dikunci 96px, tidak diulang, dan ditempel di pojok kanan atas.
2. Lapisan kedua adalah gradasi yang memenuhi seluruh kartu: ukuran auto mengikuti elemen dan posisinya di tengah.

Bila jumlah nilai lebih sedikit daripada jumlah lapisan, daftar diputar ulang dari awal — satu nilai tunggal berarti berlaku untuk semua lapisan.

Keempat deklarasi itu pada kartu sungguhan:

Sintaks position / size pada Shorthand #

Di dalam shorthand background, posisi dan ukuran satu lapisan ditulis berpasangan dengan garis miring — urutannya position / size:

.hero {
  background: linear-gradient(rgba(20, 80, 58, 0.7), rgba(20, 80, 58, 0.7)) center / cover, repeating-linear-gradient(45deg, #1f6f54 0 20px, #14503a 20px 40px);
}

center / cover berarti lapisan pertama diposisikan di tengah dengan ukuran cover — mengisi seluruh elemen tanpa merusak proporsi. Sintaks garis miring ini hanya berlaku di dalam shorthand; pada longhand, background-position dan background-size tetap dua property terpisah.

background Shorthand Mereset Semua Lapisan #

.banner-promo--polos {
  background: #14503a; /* kedua lapisan .banner-promo ikut terhapus */
}

Bila elemen .banner-promo juga diberi class di atas, seluruh lapisannya hilang dan tersisa warna hijau rata, karena background menulis ulang background-image menjadi none beserta size, position, dan repeat-nya. Ganti deklarasi menjadi background-color: #14503a; dan kedua lapisan tetap hidup.

Strategi Lapisan Cadangan #

Lapisan berguna pula sebagai jaring pengaman. background-color selalu dilukis di bawah semua lapisan image, jadi warna dasar tetap tampil bila gambar gagal dimuat. Untuk fitur yang lebih baru, pola deklarasi ganda memanfaatkan cascade:

.panel {
  background-color: #14503a;
  background-image: linear-gradient(to right, #14503a, #1f6f54);
  background-image: radial-gradient(circle at 85% 15%, #f4b942 0 36px, rgba(244, 185, 66, 0) 37px), linear-gradient(to right, #14503a, #1f6f54);
}

1. background-color menjadi penopang terakhir yang selalu ada.
2. Deklarasi background-image pertama memasang gradasi sederhana yang dipahami semua browser.
3. Deklarasi kedua menambahkan lapisan aksen; browser modern memakainya, sedangkan browser yang tidak mengenali nilainya membuang deklarasi ini dan kembali ke yang pertama.

Kesalahan Umum #

Ringkasan #

Multiple backgrounds menyusun beberapa lapisan dalam satu elemen: daftar dipisah koma dan lapisan pertama menempati posisi teratas. Tiap lapisan boleh memiliki posisi, ukuran, dan pengulangan sendiri, dan shorthand background menerima pasangan position / size — tetapi shorthand yang sama juga menghapus lapisan bila dipakai sembarangan, sehingga longhand lebih aman untuk perubahan parsial. Dengan lapisan cadangan dan background-color, tampilan tetap utuh bahkan saat sebagian lapisan gagal. Berikutnya kita pindah ke keluarga garis: memberi gaya visual pada border.