Background-Attachment

Halo semua, hari ini kita akan mempelajari Background Attachment. Sebagai contohnya, cobalah buka website Dumet School. Lihat bagian menu atasnya. Dan cobalah untuk scroll ke bawah.

Lihat! Tetap berada di posisinya bukan? Tetap berada di atas. Nah, begitulah kira-kira ilustrasinya. Sudah paham? Sekarang langsung saja lihat tutorialnya.

Background Attachment memiliki 5 value :

1. Fixed : Tetap, jika di scroll, akan tetap berada di posisi awal.

2. Scroll : Ini adalah default. Mengikuti elemen.

3. Local : Jika di scroll, mengikuti isi elemen.

4. Initial : Set properti ini ke nilai default.

5. Inherit : Mewarisi properties dari elemen induknya.

Inilah contohnya :

Fixed

See the Pen uzKeL by Dumet_School (@dumet_school) on CodePen.

Scroll

See the Pen Gnyoe by Dumet_School (@dumet_school) on CodePen.

Terlihat perbedaan bukan dari kedua contoh di atas? Untuk sisanya, silakan coba sendiri. Semoga bermanfaat ya :)