Właściwość CSSKolory i tła
background-attachment
Decyduje, czy tło przewija się razem z treścią, czy stoi w miejscu.
- Wartość domyślna
scroll- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- wszystkie elementy
- JavaScript
element.style.backgroundAttachment = "fixed"
Przykład
#CSS
.parallax {
background: url("/img/city.webp") center / cover;
background-attachment: fixed;
}HTML przykładu
<div style="height: 160px; overflow: auto; border-radius: 12px;">
<div class="parallax" style="height: 120px; background: url('/collections/covers/jak-zostac-programista.webp') center / cover; background-attachment: fixed;"></div>
<p style="margin: 0; padding: 12px; background: #0c0c10;">Przewiń: zdjęcie stoi w miejscu, a treść przesuwa się nad nim.</p>
<p style="margin: 0; padding: 12px; background: #0c0c10;">Więcej treści pod zdjęciem.</p>
</div>Podgląd
Definicja i zastosowanie
#Właściwość background-attachment określa zachowanie tła przy przewijaniu. Domyślnie (scroll) tło jest przyczepione do elementu i przewija się razem ze stroną.
fixed przypina tło do okna przeglądarki. Treść przesuwa się nad nieruchomym obrazem, co daje efekt paralaksy. local sprawia, że tło przewija się razem z zawartością przewijanego elementu, a nie z samym elementem.
Na wielu telefonach fixed jest ignorowane albo działa niepłynnie, a na komputerach potrafi obciążać przewijanie. Używaj go z umiarem.
Składnia
#Składnia
background-attachment: scroll | fixed | local;Wartości
#Wartości w praktyce
#scroll
Tło jest przyczepione do elementu, nie do jego przewijanej treści.
.demo { background-attachment: scroll; }local
Tło przewija się razem z treścią wewnątrz elementu.
.demo { background-attachment: local; }fixed
Tło przypięte do okna podglądu.
.demo { background-attachment: fixed; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Na telefonach efekt
fixedczęsto nie działa. Traktuj go jako ozdobnik, bez którego strona nadal wygląda dobrze. localprzydaje się przy cieniach sygnalizujących przewijanie wewnątrz list.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.