Background Attachment Property

Background attachment property secara spesifik digunakan untuk pemasangan background image pada body. Background image yang digunakan bisa dibuat dalam bentuk berulang/repeat atau tunggal/tak berulang/no-repeat. Pada umumnya background attachment lebih banyak menggunakan background tunggal dengan ukuran besar yang memenuhi halaman blog/web. Background attachment mempunya tiga macam value/nilai.

Value/nilai background attachment

Ada dua nilai/value yang digunakan pada background attachment property.
  • background-attachment:fixed;
  • background-attachment:scroll;

background-attachment:fixed;

Dengan nilai fixed pada property background attachment, background akan bersifat/tak bergerak statis sehingga sekalipun halaman digulung background akan tetap berada ditempat dan selalu terlihat disalah satu bagian atau keseluruhan halaman. Anda dapat menggunakan background image berukuran kecil, besar, tak berulang/no-repeat, berulang/repeat, dibagian ujung, tengah atau samping kolom/halaman. Pengaturan background ini dapat melibatkan berbagai background property yang lain seperti background-size, background-position dan background-repeat.

background-attachment:scroll;

Menggunakan value scroll akan membuat background mengikuti pergerakan halaman sesuai dengan arah scroll/penggululung bergerak. Jika anda menggulung ke atas maka background image akan bergerak turun, sedang apabila menggulung ke bawah background image bergerak naik. Sama seperti background attachment fixed, background image dapat menggunakan berbagai ukuran tergantung besaran yang dibutuhkan. Pengulangan background juga bisa dilakukan.

D E M O

  1. Dalam demo yang tersedia di bawah, anda bisa mengganti background image dengan background image yang lain untuk mengetahui secara jelas fungsi dan kegunaan background attachment property. Background image lain yang dapat anda gunakan:

    https://lh5.googleusercontent.com/-TcjNQOGwW0s/UClgr7XkUMI/AAAAAAAAAGs/7b9lvVZ1OzA/h120/Historical-Barbarian-Male-icon.png
  2. background-attachment:fixed; bisa diganti dengan "scroll"
  3. Beberapa perubahan nilai/value pada properti yang lain, seperti background-position juga dapat dirubah agar anda bisa lebih mengenal fungsi setiap property css yang tersedia.

Dalam box dibawah ini telah disediakan kode lengkap untuk demo tentang background attachment property. Edit kode untuk mendapatkan hasil berbeda!

Please click the button to display. Continue with editing code and click to see the results!

1 komentar:

My ProfileC l o s e

FollowerC l o s e