cssbackgroundgradientPemula5 mnt baca

Background

Background color, image, size, position, repeat, dan gradient. Shorthand background yang lengkap.

Background berlapis-lapis

background sebenarnya shorthand untuk 8 properti. Yang paling sering dipakai:

css

.hero {
  background-color: #0f172a;
  background-image: url("foto.jpg");
  background-size: cover;       /* penuhi area, potong bila perlu */
  background-position: center;  /* fokus tengah */
  background-repeat: no-repeat;
}

background-size: cover vs contain: cover memenuhi area (mungkin memotong gambar), contain menampilkan seluruh gambar (mungkin menyisakan ruang kosong).

Shorthand lengkap

css

.hero {
  background: url("foto.jpg") center / cover no-repeat #0f172a;
}

Urutan: image, position / size (dipisah garis miring), repeat, color. Shorthand me-reset properti yang tidak ditulis ke default, jadi hati-hati mencampurnya dengan longhand.

Gradient: background tanpa gambar

css

.kartu {
  background: linear-gradient(135deg, #38bdf8, #a855f7);
}

.bulat {
  background: radial-gradient(circle, #fde68a, #f59e0b);
}

Linear gradient butuh arah + minimal dua warna. Radial gradient menyebar melingkar dari tengah.

Beberapa background sekaligus

Pisahkan koma, yang pertama paling atas:

css

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

Teknik overlay gelap di atas foto ini standar untuk hero section agar teks putih terbaca.

Catatan teknis: background-attachment: fixed bikin background diam saat scroll (efek parallax murah), tapi bermasalah di iOS Safari. Untuk parallax yang mulus, pakai transform di JavaScript atau biarkan saja.

Analogi: dinding kamar

Background seperti dinding kamar: bisa dicat polos (warna), ditempel wallpaper berpola (gambar berulang), atau dipasang mural besar (gambar cover). Shorthand background seperti memesan "cat + wallpaper + posisi" dalam satu kalimat.

Kenapa urutan layer penting?

Background mendukung BANYAK layer bertumpuk (pisahkan koma). Layer pertama = paling depan. Ini memungkinkan efek tanpa elemen tambahan: gradien gelap di atas foto agar teks terbaca.

Contoh bertahap: hero section

Level 1, warna polos:

css

.hero {
  background: #0f172a;
  color: white;
  padding: 80px 24px;
}

Level 2, foto dengan overlay gradien agar teks terbaca:

css

.hero {
  background:
    linear-gradient(rgba(15, 23, 42, 0.6), rgba(15, 23, 42, 0.6)),
    url("foto.jpg") center / cover no-repeat;
  color: white;
  padding: 80px 24px;
}

Dua layer: gradien gelap (depan) + foto (belakang). Teks putih selalu terbaca apa pun fotonya.

Level 3, pola halus dengan repeating gradient (tanpa gambar sama sekali):

css

.pola-garis {
  background: repeating-linear-gradient(
    45deg,
    #f1f5f9,
    #f1f5f9 10px,
    #e2e8f0 10px,
    #e2e8f0 20px
  );
}

Garis diagonal berulang: tekstur murah tanpa file gambar.

Kesalahan umum pemula

Salah: teks tidak terbaca di atas foto. Selalu uji dengan foto paling terang. Solusi: overlay gradien gelap atau filter: brightness() pada gambar.

Salah: background shorthand menimpa background-image. background: red me-reset SEMUA sub-properti termasuk image. Kalau sudah set image lalu tulis shorthand, image hilang!

css

/* SALAH: gambar hilang karena shorthand me-reset */
.hero {
  background-image: url("a.jpg");
  background: red;
}

/* BENAR: shorthand dulu, atau pakai background-color */
.hero {
  background: red url("a.jpg") center / cover;
}

Salah: gambar besar tanpa kompresi. Background foto 5MB membuat halaman lambat. Kompres di bawah 200KB dan pertimbangkan format modern (WebP).

Latihan kilat

Hero dengan foto pantai.jpg yang menutupi seluruh area tanpa gepeng, plus overlay hitam 50% agar teks putih terbaca. Tulis satu properti background.
Apa yang terjadi bila kamu menulis background-image: url(a.jpg); lalu background: red;? Jelaskan dan perbaiki.
Buat pola garis diagonal berulang TANPA file gambar. Petunjuk: repeating-linear-gradient.

Kunci: (1) background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("pantai.jpg") center / cover no-repeat;. (2) Shorthand me-reset image sehingga gambar hilang; perbaiki: background: red url("a.jpg") center / cover;. (3) background: repeating-linear-gradient(45deg, #f1f5f9, #f1f5f9 10px, #e2e8f0 10px, #e2e8f0 20px);.

Istilah kunci

background-color: warna dasar.
background-image: gambar / gradien sebagai latar.
background-size: cover (penuhi, potong) vs contain (utuh, ada ruang).
Layer: beberapa background bisa ditumpuk (pisahkan koma).
Shorthand: me-reset SEMUA sub-properti, hati-hati urutan penulisan.

Rangkuman

Kuasai background-size: cover, shorthand dengan garis miring untuk position/size, dan gradient untuk dekorasi tanpa file gambar. Overlay gradient + foto adalah resep hero section.

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Hero Section Impian

Di playground:

Ubah gradient .hero menjadi diagonal dari ungu gelap ke pink (#7c3aed ke #ec4899), overlay tetap ada.
Buat class .pola baru: background repeating-linear-gradient garis-garis (cari sintaksnya, petunjuk: repeating-linear-gradient(45deg, ...)).
Di komentar, jelaskan perbedaan cover dan contain dengan contoh kasus masing-masing.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Halo CSS</h1>
<p>Edit styles.css dan lihat hasilnya.</p>
</body>
</html>

Open Sandbox