Cara Menambahkan Gambar Latar Belakang di CSS

Halo teman-teman!
Setelah sebelumnya kita belajar bagaimana memberi warna latar pada elemen dengan background-color, sekarang kita naik level sedikit. Kali ini kita akan bahas cara menambahkan gambar latar belakang di CSS dengan properti background-image.

Properti ini bisa bikin tampilan web kamu jadi lebih keren, karena selain warna, kamu juga bisa menggunakan gambar, tekstur, atau pola sebagai latar belakang. Tapi tentu saja, kita juga harus tetap perhatikan keterbacaan dan kenyamanan desainnya.

Apa Itu background-image?

background-image adalah properti di CSS yang digunakan untuk menyisipkan gambar sebagai latar belakang dari suatu elemen HTML. Gambar ini bisa berasal dari file lokal atau dari URL.

Contoh dasar penggunaannya:

body {
  background-image: url('gambar.jpg');
}

Bagaimana Gambar Ditampilkan Secara Default?

Secara default, gambar latar akan mengulang (repeat) baik secara horizontal maupun vertikal untuk mengisi seluruh area elemen. Mirip seperti motif ubin yang terus diulang sampai penuh.

Kalau gambar kamu kecil, dan kamu tidak ingin gambar tersebut diulang-ulang, kita bisa hentikan dengan properti tambahan seperti background-repeat: no-repeat — tapi kita akan bahas itu di materi selanjutnya.

Gambar Latar Tidak Hanya untuk body

Meskipun sering digunakan untuk body, kamu juga bisa menambahkan gambar latar belakang ke elemen lain seperti:

.card {
  background-image: url('pola.png');
}

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

Hal ini bisa kamu manfaatkan untuk mempercantik tampilan kartu konten, header, bahkan tombol atau section tertentu.

Tips Memilih Gambar Latar

• Pastikan gambar tidak mengganggu keterbacaan teks

• Gunakan gambar dengan ukuran file kecil agar loading halaman tetap cepat

• Untuk teks di atas gambar, bisa tambahkan layer semi-transparan agar kontras lebih jelas

• Gunakan gambar yang sesuai dengan tema dan suasana website kamu

Contoh kombinasi layer transparan:

.overlay {
  background-image: url('foto.jpg');
  background-color: rgba(0, 0, 0, 0.3);
  background-blend-mode: darken;
  color: white;
  padding: 40px;
}

Apakah background-image Bisa Dipakai Bareng background-color?

Jawabannya: Bisa banget!

Kamu bisa menggabungkan warna dan gambar dalam satu elemen. Misalnya, warna bisa menjadi fallback jika gambar gagal dimuat, atau bisa digunakan bersamaan dengan mode campuran (blend mode).

.hero {
  background-color: #cccccc;
  background-image: url('hero.jpg');
  background-blend-mode: overlay;
}

Yuk Coba Sendiri!

Sekarang giliran kamu buat eksperimen! Coba tambahkan gambar latar belakang ke elemen body, header, atau kartu konten di websitemu. Gunakan gambar yang ringan dan tetap ramah untuk teks. Lalu, jangan lupa eksplorasi kombinasi dengan warna juga.

Di materi selanjutnya, kita akan bahas lebih lanjut tentang pengaturan lanjutan seperti background-repeat dan background-position agar gambar kamu tampil lebih presisi dan tidak mengganggu tampilan.

Baca juga