CSS 03B: Background Image dan Gradient

Background berada di belakang konten dan padding elemen. Ia dapat berupa warna, gambar, atau gradient.

1. Gambar Latar dan Overlay

Contoh berikut memakai gambar CC0 yang dapat langsung dimuat di sandbox.

cover memperbesar gambar hingga area tertutup, tetapi sebagian sisi gambar dapat terpotong. Jika seluruh gambar harus terlihat, pertimbangkan contain atau elemen img. Gambar yang membawa informasi penting sebaiknya tetap menjadi img dengan alt.

2. Linear dan Radial Gradient

Sudut 135deg menentukan arah linear gradient. Radial gradient menyebar dari titik pusat. Gunakan keduanya dengan lembut agar konten tetap menjadi fokus.

Gambar pada contoh berasal dari MDN Learning Area yang menggunakan lisensi CC0 1.0.

Kesalahan Umum

• Menaruh informasi penting dalam background tanpa alternatif teks.
• Menggunakan file gambar terlalu besar.
• Menganggap cover tidak pernah memotong gambar.
• Menambahkan gradient berlebihan hingga teks sulit dibaca.

Latihan

Ubah arah gradient, warna overlay, dan posisi background pada contoh. Kecilkan viewport untuk mengamati bagian gambar yang terpotong oleh cover.

Rangkuman

Background cocok untuk dekorasi. background-position mengatur posisi, background-size mengatur ukuran, dan beberapa background dapat ditumpuk untuk membuat overlay.