Gambar sebagai Background

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:

css
.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:

css
.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:

css
.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.