Beranda / CSS / Pemrograman / Web

Bikin Website Makin Hidup dengan CSS Background Image (Tutorial CSS Part 11)

Oleh Sopyan Posting Komentar
Logo CSS
Gambar 11.0 : Logo CSS

Kalau kamu lagi ngulik tampilan website biar lebih menarik, jangan lupakan yang satu ini: background image! Yap, gambar latar bisa bikin tampilan halaman web kamu jauh lebih hidup dan nggak monoton. Nah, di artikel ini kita bakal bahas tuntas tentang CSS background-image dan properti-properti lainnya yang sering dipakai bareng buat ngatur latar belakang.

1. Apa Itu CSS background-image?

background-image adalah properti di CSS yang digunakan buat menambahkan gambar sebagai latar belakang elemen HTML. Kamu bisa pakai gambar dari URL lokal maupun online.

Contoh penggunaan:

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

Simple banget, kan? Tapi, biar hasilnya lebih rapi dan sesuai keinginan, biasanya properti ini dikombinasikan dengan beberapa properti pendukung lainnya.

Contoh menggunakan internal CSS:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-image: url('gambar-latar.jpg');
    }
  </style>
</head>
<body>
  <h1>Selamat Datang di Website Saya</h1>
</body>
</html>

Hasilnya:

Contoh CSS Background Image
Gambar 11.1 : Contoh CSS Background Image

2. Properti-Properti Latar Belakang di CSS

Biar kamu makin jago, yuk kenalan juga sama properti lain yang sering dipakai bareng background-image. Nih, ada rangkumannya dalam tabel:

Properti Fungsi
background-image Menentukan gambar yang akan digunakan sebagai latar belakang.
background-repeat Mengatur apakah gambar diulang (repeat) atau tidak.
background-size Menyesuaikan ukuran gambar (bisa cover, contain, atau ukuran custom).
background-position Menentukan posisi gambar di dalam elemen (misal: center, top left).
background-attachment Menentukan apakah gambar ikut scroll atau tetap di tempat (scroll, fixed).
background-color Warna latar belakang jika gambar nggak dimuat atau transparan.
background (shorthand) Gabungan dari semua properti latar belakang di satu baris.

Contoh Kombinasi Properti:

body {
  background-image: url('gambar-latar.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

Hasilnya? Gambar latar penuh di layar, nggak ngulang-ngulang, tetap di tempat meski kamu scroll halaman. Cakep, kan?

Contoh kode menggunakan internal CSS:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-image: url('gambar-latar.jpg');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
    }
  </style>
</head>
<body>
  <h1>Pemandangan Langit Sore!</h1>
  <p>Nikmati suasana langit sore langsung dari tampilan websitemu</p>
</body>
</html>

Hasilnya:

Contoh Properti CSS Background
Gambar 11.2 : Contoh Properti CSS Background

Tips Buat Gunain Background Image

  • Optimasi ukuran gambar – Jangan pakai file terlalu besar, biar loading halaman tetap ngebut.
  • Gunakan gambar yang kontras – Biar teks tetap kebaca meski ada gambar di belakang.
  • Coba pakai gradient atau overlay – Supaya tampilan makin elegan dan teks tetap jelas.

Penutup

CSS background-image itu sederhana tapi powerful banget. Dengan kombinasi beberapa properti pendukung, kamu bisa bikin desain web yang lebih hidup dan profesional. Jadi, jangan ragu bereksperimen, ya!

Kalau kamu baru mulai belajar CSS, coba dulu utak-atik properti background di satu elemen. Setelah itu, baru main di layout yang lebih kompleks. Happy coding!

Posting Komentar untuk "Bikin Website Makin Hidup dengan CSS Background Image (Tutorial CSS Part 11)"