Tidak semua gambar adalah konten. Latar foto di balik teks hero, tekstur samar di footer, atau pemandangan yang sengaja digelapkan agar tulisan tetap terbaca — semuanya lebih alami diperlakukan sebagai background, bukan elemen <img>. Section Warna, Background, dan Borders sudah memperkenalkan background-image, background-size, dan background-position; chapter ini menyatukan ketiganya untuk kebutuhan nyata: memilih antara background dan elemen img, serta menumpuk lapisan gradien agar teks di atas foto tetap mudah dibaca.
Kapan Background, Kapan Elemen img? #
Keputusan ini bukan soal selera, melainkan soal peran gambar di halaman:
| Situasi | Pilihan | Alasan |
|---|---|---|
| gambar membawa informasi (produk, dokumentasi) | <img> + alt | pembaca layar menyampaikan alt; gambar ikut tercetak |
| gambar murni dekorasi atau pembangun suasana | background-image | diabaikan pembaca layar; tidak menambah beban struktur |
| teks harus berada di atas gambar | background-image + overlay | lapisan gradien mudah ditumpuk di atasnya |
| gambar butuh caption melekat | <img> dalam <figure> | caption semantik lewat figcaption |
| potongan berbeda per ukuran layar (art direction) | <img> + <picture> | mekanisme HTML, disinggung di chapter penutup section |
Patokan kasarnya: bila gambar hilang dan informasi ikut hilang, gambar itu konten — pakai <img>. Bila hilangnya tidak membuat siapa pun kehilangan makna, ia dekorasi — pakai background. Putusan ini sekaligus keputusan aksesibilitas: dekorasi tidak boleh dibacakan, dan konten tidak boleh tersembunyi dari pembaca layar.
Resep Hero: cover dan center #
Bentuk pemakaian background-image yang paling sering muncul adalah hero — banner lebar dengan foto di belakangnya:
.hero-pantai {
min-height: 300px;
background-image: url("pantai.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}Terapkan resepnya pada hero berikut — sengaja tanpa lapisan tambahan:
Resep ini murni menggabungkan materi dua chapter lama: cover menskalakan gambar sampai menutup kotak lalu memotong kelebihannya, dan center menjaga bagian tengah foto tetap di tengah kotak saat potongan terjadi. Satu-satunya bagian baru adalah min-height, yang memberi kotak ketinggian minimum karena background tidak pernah menambah tinggi elemen. Judul putih pada demo di atas langit krem nyaris tak terbaca — satu fungsi linear-gradient itulah yang membedakan hero yang ramah pembaca dan hero yang melelahkan.
Overlay Gradien agar Teks Terbaca #
Foto indah jarang memberi permukaan yang rata untuk teks. Solusi standarnya adalah menumpuk lapisan gelap transparan di atas foto — dan multiple backgrounds menyelesaikannya dalam satu property:
.hero-overlay {
background-image: linear-gradient(rgb(10 31 22 / 0.72), rgb(10 31 22 / 0.72)), url("hutan.jpg");
background-size: cover;
background-position: center;
}Karena demo di course ini berjalan tanpa koneksi, “foto”-nya disimulasikan gradien ber-cakrawala tegas — teknik layer-nya persis sama bila url("...") diganti foto sungguhan:
Aturan urutannya: lapisan pertama berada paling atas, lapisan berikutnya di bawahnya, jadi gradien selalu ditulis sebelum url(). Dengan lapisan gelap inilah teks putih mencapai target kontras minimal 4.5:1 dari chapter Kontras Warna.
Overlay tidak harus menutup seluruh foto. Varian berikut menggelapkan hanya bagian bawah — pas untuk teks yang menempel di dasar banner:
.hero-sorot-bawah {
background-image: linear-gradient(to top, rgb(0 0 0 / 0.78), transparent 60%), url("pegunungan.jpg");
background-size: cover;
background-position: center;
}Kesalahan Umum #
| Kesalahan | Akibat | Perbaikan |
|---|---|---|
lupa background-size: cover | foto kecil berulang mengisi kotak | tambahkan cover dan background-repeat: no-repeat |
| overlay terlalu pekat | foto tak terlihat, halaman terasa kelam | turunkan opasitas atau pakai gradien parsial |
| teks kontras rendah di atas foto | sulit dibaca bagi banyak pengunjung | jaga rasio kontras minimal 4.5:1 |
Ringkasan #
Background adalah tempat yang tepat untuk gambar dekoratif: cover dan center mengisi kotak dengan rapi, dan lapisan linear-gradient transparan menjamin teks di atasnya tetap terbaca. Untuk konten yang bermakna, <img> dengan alt tetap pilihan yang benar — pemilihan ini adalah keputusan aksesibilitas, bukan sekadar tampilan. Section ini masih menyisakan satu keluarga media: video dan iframe yang harus ikut menyusut mengikuti layar — topik chapter penutup.