Background: Gambar & Gradient

Memberi latar dengan warna, gambar, dan gradient; mengatur ukuran, posisi, dan pengulangan latar.

Part 10 dari 25 ± 35 menit Gratis

Properti background

Properti	Fungsi	Nilai umum
`background-color`	Warna latar	`#f6f2e9`
`background-image`	Gambar atau gradient	`url("foto.jpg")`
`background-size`	Ukuran gambar	`cover`, `contain`, `100px`
`background-position`	Posisi gambar	`center`, `top right`
`background-repeat`	Pengulangan	`no-repeat`, `repeat-x`
`background-attachment`	Ikut scroll atau tetap	`fixed` (efek parallax)

Gambar latar yang rapi

.hero {
  background-image: url("gunung.jpg");
  background-size: cover;        /* menutupi seluruh area, dipotong bila perlu */
  background-position: center;
  background-repeat: no-repeat;
  height: 60vh;
}

cover: gambar menutup penuh (bagian lebih terpotong). Cocok untuk hero.
contain: seluruh gambar terlihat (bisa menyisakan ruang kosong).

Gambar latar adalah dekorasi. Jika gambar membawa informasi penting, pakai <img> dengan alt di HTML.

Gradient

Gradient adalah perpaduan warna yang ditulis langsung di CSS (tanpa berkas gambar):

/* linear: lurus ke satu arah */
background: linear-gradient(to right, #3c5a44, #cf9d3d);
background: linear-gradient(135deg, #26392c, #3c5a44 60%, #cf9d3d);

/* radial: memancar dari titik tengah */
background: radial-gradient(circle, #fff, #ccc);

Arah bisa berupa kata (to right, to bottom) atau sudut (90deg). Boleh banyak warna, dan setiap warna boleh diberi posisi persen.

Overlay gelap di atas foto

Agar teks putih terbaca di atas foto, tumpuk gradient transparan di atas gambar. Beberapa latar dipisah koma, yang pertama berada paling atas:

.hero {
  background:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("pantai.jpg") center / cover no-repeat;
}

Singkatan background

background: #fff url("a.png") no-repeat center / cover;

Perhatikan penulisan posisi / ukuran dipisah garis miring.