Background-attachment - Trik CSS

The background-attachmentproperti di menspesifikasikan CSS bagaimana memindahkan latar belakang relatif terhadap viewport.

Ada tiga nilai: scroll, fixed, dan local. Cara terbaik untuk menjelaskan ini adalah melalui demo (coba gulir latar belakang individu):

Lihat demo lampiran Latar Belakang Pena oleh Timothy Miller (@tjacobdesign) di CodePen.

Ada dua pandangan berbeda untuk dipikirkan ketika berbicara tentang background-attachment: tampilan utama (jendela browser), dan tampilan lokal (Anda dapat melihat ini pada demo di atas).

scrolladalah nilai default. Ini menggulung dengan tampilan utama, tetapi tetap di dalam tampilan lokal.

fixedtetap diperbaiki apa pun yang terjadi. Ini seperti jendela fisik: bergerak di sekitar jendela mengubah perspektif Anda, tetapi tidak mengubah tempat di luar jendela.

localditemukan karena nilai default scrollbertindak seperti latar belakang tetap. Ini menggulir baik dengan tampilan utama dan tampilan lokal. Ada beberapa hal keren yang dapat Anda lakukan dengannya.

Terkait

klip latar belakang
warna latar belakang
gambar latar belakang
background-origin
background-position
ulangi latar belakang
background-size

Sumber Daya Lainnya

Spesifikasi CSS3
MDN

Dukungan Browser

Nilai fixeddan scrolldidukung di mana-mana, meskipun fixeddapat berperilaku aneh di seluler. localmemiliki dukungan browser ini:

Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.