Properti background-attachment digunakan untuk menentukan apakah gambar latar belakang diperbaiki relatif terhadap viewport, atau menggulir bersama elemen atau kontennya.

Beberapa kata kunci lampiran dapat digunakan ketika banyak gambar latar belakang digunakan. Nilai-nilai tersebut kemudian dipisahkan dengan koma, dan setiap nilai diterapkan ke gambar latar belakang yang sesuai (nilai pertama untuk gambar pertama, nilai kedua untuk gambar kedua, dan sebagainya).

Hanya ada satu viewport dalam satu view. Dan tidak ada viewport di media paged (cetak), jadi jika gambar diperbaiki, itu diperbaiki sehubungan dengan kotak halaman dan karenanya direplikasi pada setiap halaman.

Ketika gambar latar belakang elemen diatur untuk diperbaiki relatif terhadap viewport, itu akan diperbaiki sehingga bahkan jika elemen memiliki konten yang dapat digulir di dalamnya (seperti dalam contoh di bawah), latar belakang akan tetap dan tidak akan menggulir dengan elemen tersebut. atau isinya.

Juga, bahkan jika gambar sudah diperbaiki, masih hanya terlihat ketika berada di area lukisan latar belakang elemen atau tidak dikunci (lihat properti pengulangan latar belakang untuk informasi lebih lanjut). Jadi, kecuali gambar itu berupa ubin, itu mungkin tidak terlihat di dalam elemen. Banyak situs web menggunakan gambar tetap untuk membuat efek gulir yang bagus pada sebuah halaman: gambar latar tetap relatif terhadap viewport, dan itu pertama kali terlihat di dalam elemen, dan segera setelah pengguna mulai menggulir, elemen tersebut menggulung ke atas / bawah tetapi gambar latar belakang tetap pada posisi tetapnya, jadi pada titik tertentu, elemen akan mencapai posisi di mana gambar latar belakangnya tidak lagi terlihat di dalamnya, karena itu tidak ada di area lukisan latar belakang elemen itu lagi. Lihat demo langsung di bawah ini untuk contoh.

Offcial Syntax:

 

Values

scroll: Ini adalah nilai default. Latar belakang diperbaiki relatif terhadap elemen itu sendiri dan tidak menggulir dengan kontennya. Itu secara efektif melekat pada perbatasan elemen.

fixed: Latar belakang diperbaiki relatif terhadap viewport. Dalam media halaman di mana tidak ada viewport, latar belakang ‘tetap’ diperbaiki sehubungan dengan kotak halaman dan oleh karena itu direplikasi pada setiap halaman. Perhatikan bahwa hanya ada satu viewport per view. Bahkan jika suatu elemen memiliki konten yang dapat digulir, latar belakang ‘tetap’ tidak bergerak dengan elemen atau kontennya.

Bahkan jika gambar sudah diperbaiki, masih hanya terlihat ketika berada di area lukisan latar belakang elemen atau tidak terpotong. (Lihat properti pengulangan latar belakang untuk informasi lebih lanjut.) Jadi, kecuali jika gambarnya berupa ubin, gambar itu mungkin tidak terlihat di dalam elemen. Lihat demo langsung di bawah ini untuk contoh.

local: Latar belakang diperbaiki relatif terhadap konten elemen: jika konten di dalam elemen dapat digulir, latar belakang akan bergeser dengan konten elemen.

Catatan

Jika browser tidak mendukung latar belakang tetap (misalnya, karena keterbatasan platform perangkat keras) ia harus mengabaikan deklarasi dengan kata kunci diperbaiki. Dalam hal itu, lampiran latar belakang dideklarasikan untuk browser yang tidak mendukung, dan kemudian deklarasi lain mengikuti untuk browser yang mendukungnya. Anda dapat melihat contoh untuk ini di bawah ini.

Contohnya

Contoh berikut akan memperbaiki gambar latar belakang elemen relatif ke viewport. Lampiran gulir dideklarasikan pertama kali untuk browser yang tidak mendukung nilai tetap.

Contoh berikut akan mengatur dua gambar latar belakang ke suatu elemen (lihat gambar latar belakang), dan kemudian akan memperbaiki satu relatif ke elemen, dan yang kedua relatif terhadap konten sehingga bergulir dengan konten.

Contoh ini membuat band vertikal tak terbatas yang tetap “terpaku” ke viewport saat elemen digulir.