Halo, para pejuang coding dan pecinta desain web! 🌈
Pernah gak sih kamu scroll halaman web dan ngeh kalau background-nya tetap diam di tempat, nggak ngikutin gerakan scroll? Atau justru malah ikut ngegeser bareng kontennya? Nah, semua itu diatur sama satu properti kece di CSS yang namanya background-attachment.
Di artikel ini, kita bakal bahas tuntas soal CSS background-attachment, mulai dari pengertian, nilai-nilainya, sampai contoh penggunaannya. Yuk, langsung aja ngoding bareng!
Apa Itu background-attachment?
background-attachment adalah properti di CSS yang ngatur apakah background image (gambar latar belakang) bakal ikut nge-scroll bareng isi halaman, atau tetap “nempel” di tempatnya kayak mantan yang susah move on 😅.
Properti ini biasanya dipakai barengan sama background-image, tapi nggak menutup kemungkinan buat dikombinasikan dengan properti CSS lain biar efeknya makin keren.
Nilai-Nilai dalam background-attachment
Ada beberapa nilai yang bisa kamu pakai di background-attachment, dan masing-masing punya efek unik. Biar makin jelas, yuk kita bahas lewat tabel berikut:
📋 Tabel: Nilai Properti CSS background-attachment
| Nilai | Penjelasan | Efek Visual |
|---|---|---|
scroll | Ini adalah nilai default. Background akan ngegeser bareng halaman saat di-scroll. | Gambar background ikut naik turun waktu halaman digeser. |
fixed | Background akan tetap di posisinya walaupun halaman di-scroll. | Background seperti diam di tempat, kontennya aja yang bergerak. |
local | Background akan nge-scroll bareng konten dari elemen itu sendiri (bukan seluruh halaman). | Cocok buat elemen dengan overflow: scroll atau auto. Background ngikut kontennya. |
Contoh Penggunaan background-attachment
🔧 Contoh Kode dengan Internal CSS
Nah, sekarang kita cobain langsung kode HTML + CSS sederhananya. Di sini kita pakai internal CSS alias CSS yang ditulis langsung di <style> dalam file HTML-nya.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Contoh Background Attachment</title>
<style>
body {
margin: 0;
font-family: sans-serif;
}
.hero {
background-image: url('pantai.png');
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
height: 100vh;
color: white;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.content {
padding: 50px;
background-color: #f0f0f0;
line-height: 1.6;
}
</style>
</head>
<body>
<div class="hero">
<h1>Selamat Datang di Website Keren!</h1>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Scroll terus untuk lihat efek background-nya!</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:
Penjelasan Singkat:
background-attachment: fixed;di bagian.herobikin gambar tetap di tempat saat kita scroll ke bawah.background-size: cover;memastikan gambar nutupin seluruh bagian elemen.- Di bagian
.content, kita bikin area panjang biar bisa ngetes efek scroll-nya.
Coba buka file HTML di browser dan scroll ke bawah. Kamu bakal lihat kontennya jalan, tapi background tetap stay cool di belakang 😎.
Perhatian! 👀
Tidak semua browser mendukung semua nilai
background-attachmentdengan sempurna, terutamalocal. Jadi pastikan kamu tes di beberapa browser ya, terutama kalau kamu ngembangin sesuatu yang harus tampil cakep di mana-mana.
Tips & Trik Buat Tampilan Lebih Kece
- Gabungin dengan Parallax Effect
Efekfixedsering dipakai buat bikin parallax scrolling, yang bikin tampilan web jadi lebih dinamis dan modern. - Kombinasikan Sama Opacity / Overlay
Kadang backgroundfixedbisa keliatan terlalu “nyolok”. Tambahin overlay warna gelap transparan pake pseudo-element atau gradient biar teksnya tetep kebaca. - Gunakan dengan Bijak
Efekbackground-attachment: fixedbisa bikin performa agak turun di beberapa perangkat (terutama HP). Jadi, jangan terlalu banyak makainya di satu halaman, ya!
Penutup
Properti background-attachment emang kelihatannya simpel, tapi efeknya bisa ngubah total feel dari sebuah website. Kamu bisa bikin halaman lebih hidup, interaktif, dan estetik cuma dengan nambahin satu baris CSS aja.
Mau tampil klasik? Pakai scroll.
Mau tampil dramatis? Cobain fixed.
Mau bikin area khusus yang background-nya ngikut kontennya? Nah, itu kerjaannya local.
Semoga artikel ini ngebantu kamu buat makin paham dan jago mainin tampilan web pakai CSS. Yuk, cobain sekarang dan liat hasilnya langsung di browser kesayanganmu!
Punya pertanyaan atau pengen contoh live-nya? Tulis aja di kolom komentar ya! Sampai jumpa di artikel selanjutnya, dan selamat ngoding! 🚀
Komentar