Beranda / CSS / Pemrograman / Web

CSS background-attachment: Biar Background Nggak Ngikut Scroll (Tutorial CSS Part 13)

Oleh Sopyan Posting Komentar
Logo CSS
Gambar 13.0 : Logo CSS

Pernah nggak sih kamu ngedesain halaman web terus pengen background-nya stay cool alias nggak ikut geser waktu user scroll ke bawah? Nah, di sinilah properti background-attachment dari CSS masuk dan unjuk gigi.

Apa Itu background-attachment?

background-attachment adalah properti di CSS yang ngatur apakah gambar latar (background image) bakal ikut scroll bareng konten, atau tetap diam di tempat.

Dengan kata lain, properti ini bisa bikin background kamu:

  • Ngikutin gerakan scroll
  • Nempel di tempat
  • Menyesuaikan sama elemen parent-nya

Yuk kita bahas satu-satu nilainya.

🛠️ Nilai-nilai pada background-attachment

1. scroll (Default)

Ini nilai default. Background image akan ikut geser waktu user scroll halaman. 

body {
  background-image: url('pantai.jpg');
  background-attachment: scroll;
}

📌 Contoh nyata: Kamu scroll ke bawah, background pantai pun ikut ngilang ke atas.

Contoh menggunakan internal CSS:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      height: 1500px;
      background-image: url('pantai.png');
      background-attachment: scroll;
      background-repeat: no-repeat;
      background-size: cover;
    }
  </style>
</head>
<body>
  <h1>Background Scroll</h1>
  <p>Scroll halaman ini untuk lihat efeknya.</p>
</body>
</html>

Hasilnya:

Contoh CSS background-attachment:scroll;
Gambar 13.1 : Contoh CSS background-attachment:scroll;

2. fixed

Dengan nilai ini, background akan tetap di tempat, alias diam walau konten halaman di-scroll. 

body {
  background-image: url('bohlamMati.gif');
  background-attachment: fixed;
}

📌 Efek keren: Bikin semacam efek parallax. Background nggak ke mana-mana, tapi kontennya jalan.

⚠️ Tapi hati-hati, kadang efek ini nggak jalan di perangkat mobile karena alasan performa.

Contoh menggunakan internal CSS:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      height: 1500px;
      background-image: url('bohlamMati.gif');
      background-attachment: fixed;
      background-repeat: no-repeat;
      background-size: cover;
    }
  </style>
</head>
<body>
  <h1>Background Fixed</h1>
  <p>Scroll halaman ini dan perhatikan background-nya.</p>
</body>
</html>

Hasilnya:

Contoh CSS Background Fixed
Gambar 13.2 : Contoh CSS Background Fixed

3. local

Ini yang agak jarang dipakai, tapi tetap berguna. Kalau kamu punya elemen dengan scrollbar sendiri (misal <div> yang panjang), maka background-nya bakal ngikutin isi elemen itu, bukan halaman utama. 

.scroll-box {
  height: 200px;
  overflow: auto;
  background-image: url('hutan.jpg');
  background-attachment: local;
}

📌 Gunanya kapan? Kalau kamu bikin container khusus yang bisa discroll sendiri dan pengen background-nya jalan bareng konten di situ.

Contoh menggunakan internal CSS:

<!DOCTYPE html>
<html>
<head>
  <style>
    .scroll-box {
      width: 300px;
      height: 200px;
      overflow: auto;
      border: 1px solid #ccc;
      background-image: url('bohlamHidup.gif');
      background-attachment: local;
      background-repeat: no-repeat;
      background-size: cover;
      padding: 10px;
    }
  </style>
</head>
<body>
  <h1>Background Local</h1>
  <div class="scroll-box">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  </div>
</body>
</html>

Hasilnya:

Contoh CSS background attachment local
Gambar 13.3 : Contoh CSS background attachment local

🤔 Kapan Sebaiknya Pakai background-attachment?

  • Mau bikin efek parallax sederhana tanpa JavaScript? Gunakan fixed.
  • Mau background yang jalan bareng konten? Biarkan default (scroll).
  • Mau kontainer dengan latar interaktif? Coba local.

📝 Tips Tambahan

  • Kombinasikan background-attachment dengan properti lain seperti background-position, background-size, dan background-repeat biar tampilannya makin kece.
  • Kalau pakai fixed, pastikan desain tetap responsif dan nyaman dilihat di semua perangkat.
  • Untuk efek parallax yang lebih kompleks, kadang butuh JavaScript juga.

🎯 Kesimpulan

background-attachment mungkin kelihatan sepele, tapi bisa bikin tampilan web kamu beda dan lebih hidup. Tinggal pilih: mau background-nya diem aja, jalan bareng, atau ngikut kontainer? Semua bisa, tinggal disesuaikan sama kebutuhan desain kamu.

Semoga penjelasan ini bikin kamu makin akrab sama dunia CSS, ya! Selamat ngoding dan eksperimen dengan background kamu! 🚀

Posting Komentar untuk "CSS background-attachment: Biar Background Nggak Ngikut Scroll (Tutorial CSS Part 13)"