Hari 9: CSS Background – Belajar CSS From Zero to Hero

by

Belajar CSS background: cara mengatur warna, gambar, posisi, ukuran, dan repeat background. Lengkap dengan contoh kode, studi kasus, dan latihan praktis.

Hari 9: CSS Background – Belajar CSS From Zero to Hero

Apa Itu CSS Background?

CSS background digunakan untuk mengatur tampilan latar belakang elemen HTML. Dengan background, kita bisa menambahkan warna polos, gambar, atau bahkan kombinasi keduanya untuk membuat desain web lebih menarik.

Properti background CSS sangat fleksibel dan sering dipakai pada header, section, banner, atau tombol.

Properti-Proporsi Background di CSS

1. Background Color

Memberikan warna latar belakang elemen.

body {
  background-color: #f2f2f2;
}

Hasil: seluruh halaman memiliki background abu-abu terang.

2. Background Image

Menambahkan gambar sebagai latar belakang.

header {
  background-image: url('banner.jpg');
}

Hasil: gambar banner.jpg digunakan sebagai background pada header.

3. Background Repeat

Mengatur apakah gambar background diulang.

  • repeat (default) → diulang ke seluruh area.
  • no-repeat → tidak diulang.
  • repeat-x → diulang horizontal.
  • repeat-y → diulang vertikal.

Contoh:

header {
  background-image: url('pattern.png');
  background-repeat: repeat-x;
}

4. Background Position

Mengatur posisi gambar background.

  • top, center, bottom, left, right.

Contoh:

header {
  background-image: url('hero.jpg');
  background-repeat: no-repeat;
  background-position: center top;
}

5. Background Size

Mengatur ukuran gambar background.

  • auto (default).
  • cover → menutupi seluruh area.
  • contain → menyesuaikan ukuran agar pas.

Contoh:

header {
  background-image: url('hero.jpg');
  background-size: cover;
}

6. Background Attachment

Mengatur apakah background ikut bergulir saat scroll.

  • scroll (default).
  • fixed → background tetap di tempat (efek parallax).

Contoh:

section {
  background-image: url('bg.jpg');
  background-attachment: fixed;
}

7. Shorthand Background

Semua properti background bisa ditulis singkat:

header {
  background: url('hero.jpg') no-repeat center/cover;
}

Studi Kasus: Membuat Hero Banner

HTML:

<header>
  <h1>Belajar CSS Background</h1>
  <p>Hari 9: Memahami Background di CSS</p>
</header>

CSS:

header {
  background: url('hero.jpg') no-repeat center/cover;
  color: white;
  text-align: center;
  padding: 100px 20px;
}

Hasil: sebuah hero banner dengan gambar latar belakang penuh layar, teks putih di tengah, dan padding luas.

Kesalahan Umum Pemula

  1. Gambar tidak muncul
    • Path URL salah (url('img/bg.png')). Pastikan file ada di folder yang benar.
  2. Menggunakan gambar besar tanpa optimasi
    • Bisa membuat website lambat. Selalu kompres gambar dengan tool seperti TinyPNG.
  3. Lupa fallback color
    • Tambahkan background-color untuk berjaga-jaga jika gambar gagal dimuat.

Tips Menggunakan CSS Background

  • Gunakan warna solid untuk area luas (lebih ringan).
  • Gunakan gambar berkualitas terkompresi untuk kecepatan website.
  • Manfaatkan background-size: cover; untuk desain modern (full-screen banner).
  • Tambahkan overlay (warna transparan) agar teks tetap terbaca.

Contoh:

header {
  background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('hero.jpg') center/cover;
  color: white;
}

Latihan Praktis Hari 9

  1. Buat halaman HTML dengan <header> dan <section>.
  2. Terapkan:
    • background-color pada <section>.
    • background-image pada <header>.
    • Gunakan background-size: cover; dan background-attachment: fixed;.

Referensi Belajar

Rencana Belajar Selanjutnya

Hari ini kamu sudah belajar CSS Background: color, image, repeat, position, size, attachment, dan shorthand. Besok, kita akan lanjut ke Hari 10: CSS Box Model untuk memahami struktur dasar layout CSS.
👉 Lanjut ke Hari 10: CSS Box Model

Kesimpulan

  • CSS background bisa berupa warna, gambar, atau kombinasi keduanya.
  • Properti penting: background-color, background-image, background-size, background-position.
  • Gunakan shorthand untuk menulis lebih ringkas.

🌟 Tantangan Hari 9:
Buat sebuah hero section dengan gambar latar, teks di tengah, dan efek parallax. Bagikan hasilmu di GitHub atau media sosial dengan hashtag #BelajarCSS.

Leave a Comment