Cara Mengatur Background Attachment di CSS

Februari 13, 2025

Halo teman-teman!
Setelah sebelumnya kita bahas tentang background-repeat dan background-position, sekarang kita masuk ke properti yang nggak kalah keren, yaitu background attachment (pengaturan pergerakan background).

Properti ini memungkinkan kita mengatur apakah gambar background akan ikut bergulir (scroll) bersama halaman atau tetap diam di tempatnya (fixed). Yuk kita bahas cara penggunaannya!

css_background_attachment

Apa Itu Background Attachment?

Background attachment adalah properti CSS yang digunakan untuk menentukan apakah gambar background akan bergulir (scroll) bersama isi halaman atau tetap diam di tempatnya (fixed).

Properti ini memiliki dua nilai utama:

  • scroll (bergulir) → gambar akan ikut bergerak saat pengguna menggulir halaman (default)

  • fixed (tetap) → gambar background akan tetap berada di posisinya, seolah-olah menempel di jendela browser

Contoh Background Tetap (fixed)

Dengan pengaturan fixed, gambar akan tetap di tempat meskipun halaman digulir. Cocok untuk efek parallax atau bagian header yang dramatis.

body {
  background-image: url('img_tree.png');
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

Dengan kode di atas, gambar akan terlihat tetap di posisi kanan atas meskipun kamu scroll halaman ke bawah.

Contoh Background Bergulir (scroll)

Kalau kamu ingin gambar ikut bergeser bersama isi halaman, cukup ubah nilainya ke scroll:

body {
  background-image: url('img_tree.png');
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: scroll;
}

Hasilnya, gambar background akan bergulir bersama isi halaman seperti elemen biasa.

Kapan Sebaiknya Menggunakan Background Attachment?

Gunakan background attachment fixed jika:

  • Kamu ingin menciptakan efek visual yang dinamis

  • Halamanmu tidak terlalu panjang (agar performa tetap baik)

  • Gambar background cukup besar dan jelas

Hindari penggunaan fixed di perangkat mobile karena tidak selalu didukung dengan baik dan bisa mengganggu performa.

Tips Penggunaan Background Attachment

  • Gabungkan dengan background-size: cover untuk hasil yang lebih menyatu

  • Gunakan gambar resolusi tinggi agar tidak terlihat pecah

  • Uji efeknya di berbagai perangkat dan browser

Yuk Coba Sendiri!

Sekarang coba eksplorasi penggunaan background attachment di halaman HTML kamu. Coba terapkan ke body, section, atau hero banner. Bandingkan efek scroll dan fixed, lalu lihat mana yang paling cocok untuk desain yang kamu inginkan.

Di materi selanjutnya, kita akan pelajari cara menyingkat penulisan semua properti background ke dalam satu baris menggunakan background shorthand.

Tidak ada komentar