Menguasai Background CSS: Dari Warna hingga Gambar Responsif

Untuk menciptakan desain yang dinamis, Anda perlu memahami bagaimana mengontrol latar belakang elemen. Berikut adalah properti utama yang wajib Anda kuasai:

1. Background-Color

Memberikan warna solid pada latar belakang. Anda bisa menggunakan sistem warna yang telah kita pelajari sebelumnya (HEX, RGB, atau HSL).

• Contoh: background-color : #f4f4f4;

2. Background-Image

Digunakan untuk memasukkan gambar. Anda harus menggunakan fungsi url() untuk memanggil file.

• Contoh: background-image: url('pemandangan.jpg');

3. Backg round-Repeat

Secara default, browser akan mengulang gambar jika ukuran elemen lebih besar dari ukuran gambar.

• repeat: Mengulang secara horizontal dan vertikal (default).

• no-repeat: Gambar hanya muncul satu kali.

• repeat-x atau repeat-y: Mengulang hanya ke satu arah.

4. Background-Position

Menentukan koordinat awal gambar muncul.

• Kata Kunci: top, bottom, left, right, center.

• Koordi nat: center center (tengah-tengah) atau top right.

• Presisi: Bisa menggunakan pixel atau persentase, misal 20px 50px.

5. Background-Size (Kunci Layout Modern)

Properti ini sangat kr usial agar gambar tidak pecah atau terpotong dengan buruk.

• Cover: Gambar akan memenuhi seluruh area elemen. Jika rasio berbeda, gambar akan terpotong (crop), tetapi tidak akan ada ruang kosong. Sangat cocok untuk hero section.

• Contain: Gambar akan ditampilkan sepenuhnya di dalam elemen tanpa terpotong. Ini mungkin menyisakan ruang kosong jika rasio elemen tidak sama dengan gambar.

• Auto: Ukuran asli gambar.

Tutorial: Membuat Hero Section yang Menarik

Mari kita praktikkan properti di atas untuk membuat bagian atas website (Hero Section) yang profesional.

Struktur HTML

<section class="hero-header"> <div class="content"> <h1>Selamat Datang di SatuMediah1> <p>Portal berita teknologi terdepan di Indonesia.p> div>
section>

< !---->

Kode CSS

.hero-header { height: 400px; width: 100%; /* Kombinasi Properti Background */ background-color: #2c3e50; /* Warna fallback jika gambar gagal dimuat */ background-image: url('https://images.unsplash.com/photo-1451 187580459-43490279c0fa'); /* Mengatur agar gambar tidak berulang */ background-repeat: no-repeat; /* Mengatur posisi gambar selalu di tengah */ background-position: center; /* Memastikan gambar menutup seluruh area tanpa pecah */ background-size: cover; /* Opsional: Membuat gambar sedikit gelap agar teks terbaca */ background-blend-mode: overlay; /* Menata posisi teks di tengah */ display: flex; align-items: center; justify-content: center; text-align: center; color: white;
}

Shorthand Property (Cara Cepat)

Anda bisa menuliskan semua properti di atas dalam satu baris untuk menghemat waktu:

/* Urutan: color image repeat position / size */
.hero-header { background: #2c3e50 url('bg.jpg') no-repeat center / cover;
}

Catatan: Saat menggunakan shorthand, pastikan untuk memisahkan po sition dan size dengan garis miring (/).

Tips Pro untuk Developer

1. Fallback Color: Selalu sert akan background-color meskipun Anda menggunakan gambar. Jika koneksi internet user lambat dan gambar belum muncul, teks Anda tetap bisa terbaca di atas warna latar belakang tersebut.

2. Optimasi Gambar: Di proyek seperti riwara.id, pastikan gambar yang digunakan sebagai background sudah di-kompres. Gunakan format .webp untuk performa terbaik agar loading website tetap kencang.

3. Fixed Background: Tambahkan background-attachment: fixed jika Anda ingin menciptakan efek Parallax (gambar latar belakang tetap diam saat halaman di-scroll).