Belajar CSS Bagian 3 : Mengenal Background pada CSS

Dalam pengembangan tampilan website, background memegang peran penting untuk mempercantik layout dan meningkatkan kenyamanan membaca. Pada artikel ini, kita akan membahas cara menggunakan properti background pada CSS, mulai dari background warna hingga background gambar.

1. Struktur Dasar HTML dengan Section dan Div

Sebelum masuk ke CSS, kita siapkan dulu struktur HTML-nya.
Biasanya, halaman dibagi menggunakan <section> untuk membedakan bagian besar konten.

Contoh sederhana:

• Satu <section>

• Di dalamnya terdapat dua bagian:

  • Bagian kiri → berisi teks

  • Bagian kanan → berisi gambar

Agar rapi, masing-masing bagian kita bungkus menggunakan <div>:

<section class="hero">
  <div class="hero-left">
    <h1>Belajar CSS Background</h1>
    <p>Panduan dasar memahami background color dan background image.</p>
    <button class="btn">Pelajari Sekarang</button>
  </div>
  <div class="hero-right">
    <img src="image.png" alt="Contoh Gambar">
  </div>
</section>

2. Memberi Background Color pada CSS

Properti paling dasar yang sering digunakan adalah background-color.

Misalnya kita ingin memberi warna latar belakang pada section:

.hero { background-color: #fcf108; padding: 40px; } 

Selain menggunakan kode warna HEX, kamu juga bisa memakai nama warna langsung seperti:

• yellow

• blue

• white

• black

3. Mengatur Background Berbeda untuk Tiap Bagian

Kadang bagian kiri dan kanan memiliki warna latar berbeda.

.hero-left { background-color: white; padding: 20px; } .hero-right { background-color: #f5f5f5; } 

Dengan cara ini:

• Bagian kiri tetap putih agar teks mudah dibaca

• Bagian kanan terlihat kontras dan rapi

4. Styling Button dengan Background

Button biasanya diberi warna latar agar terlihat menonjol.

.btn { background-color: #ff6600; color: white; padding: 10px 20px; border: none; } 

Jika sebuah elemen memiliki lebih dari satu class, maka CSS akan mengikuti prioritas (specificity) dan urutan penulisan.
Inilah alasan kenapa kadang style terasa “ketimpa” oleh class lain.

5. Menggunakan Background Image

Selain warna, CSS juga mendukung background gambar menggunakan background-image.

.hero { background-image: url("background.jpg"); } 

Agar gambar tampil lebih rapi, biasanya ditambahkan:

.hero { background-image: url("background.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; } 

Penjelasan singkat:

• background-size: cover → gambar memenuhi area

• background-position: center → posisi gambar di tengah

• background-repeat: no-repeat → gambar tidak diulang

6. Praktik Umum Penggunaan Background

Dalam praktik sehari-hari:

• background-color → untuk section, card, button

• background-image → untuk hero section atau banner

• Kombinasi warna dan gambar → membuat tampilan lebih profesional

Biasanya background gambar ditempatkan di <section> agar lebih fleksibel dibandingkan memakai <img>.

Kesimpulan

Properti background pada CSS sangat penting untuk membangun tampilan website yang menarik.
Dengan memahami:

• background-color

• background-image

• background-size

• background-position

kamu sudah memiliki fondasi kuat untuk membuat layout website yang modern dan rapi.