Background warna dan gambar

Warnai latar halaman atau jadikan gambar sebagai latar.

Pahami konsepnya

Properti background mengatur latar elemen, dan latar yang tepat mengubah kesan halaman seketika. Bentuk paling sederhana: warna. background: teal atau background: #35A9DB mewarnai seluruh bidang elemen — pada body, seluruh halaman; pada sebuah div, hanya kotak itu.

Bentuk kedua: gambar. background: url('pemandangan.jpg') menempelkan berkas gambar sebagai latar. Perilaku bawaannya digandakan (repeat) memenuhi bidang bila gambarnya lebih kecil — kendalikan dengan background-repeat: no-repeat untuk sekali tampil atau repeat-x/repeat-y untuk satu arah. Ukurannya juga bisa dipaksa: background-size: cover memenuhi bidang dengan memotong kelebihan, background-position: center menempatkannya di tengah.

Kombinasi favorit praktik: warna latar diletakkan di bawah gambar sebagai cadangan saat gambar gagal dimuat, dan teks di atasnya diberi warna kontras agar tetap terbaca. Semua properti background bisa juga diringkas satu baris — itu pelajaran setelah ini berkembang.

Coba contoh kode

body {
  background: #35A9DB;
  color: #fff;
}

.hero {
  background: url('pemandangan.jpg') center / cover no-repeat;
  height: 300px;
}

body mendapat latar biru dengan teks putih kontras. .hero memakai gambar yang diposisikan tengah, disesuaikan cover, tanpa penggandaan — tiga nilai itu dirangkum dalam satu deklarasi background beserta pemisah garis miring untuk ukuran. Selalu siapkan warna cadangan agar halaman tetap layak saat gambarnya tak kunjung tiba.

Gradien lembut tanpa gambar

.kartu {
  background: linear-gradient(to right, #ffd89b, #19547b);
}

linear-gradient membuat peralihan warna langsung dari CSS tanpa berkas gambar — arahnya diatur to right/top/bottom, warnanya boleh lebih dari dua. Gradien adalah "gambar" menurut CSS, jadi ia hidup di properti background yang sama.

Latihan singkat

Beri halamanmu latar warna lembut, lalu buat satu section hero dengan gambar latar mode cover dan teks yang tetap terbaca.