CSS vlastnost background-attachment určuje rolování obrázkového pozadí.
hodnoty | chování pozadí |
---|---|
scroll | pozadí skroluje se stránkou |
fixed | pozadí se drží na místě, je přibité |
local | pozadí skroluje uvnitř prvků, které mají rolovací lištu |
Výchozí hodnotou je scroll, takže pokud se hodnota nezadá, pozadí roluje se stránkou.
V HTML 3.2 se posouvání pozadí dělalo zastaralým atributem bgproperties tagu <body>.
Pokud chci, aby mi pozadí zůstávalo na místě, tak ten background-attachment: fixed (a potažmo celý background) je nutno přidat tomu elementu, který ve skutečnosti roluje. Nejčastěji je to body. Pokud bude rolovat body a obrázek bude nastaven u <body>, bude pozadí zůstávat na svém místě. Tedy:
body {background-attachment: fixed;}
Jestliže mám naopak ve stránce nějaký vysoký prvek a odjíždím celým prvkem, tak je jasné, že ujede i obrázek na pozadí. Pokud bych chtěl, aby bylo pozadí nastaveno u toho vysokého prvku (tedy ne u <body>), tak tomu prvku musím zároveň přidat výšku a overflow: auto (nebo scroll), což mu přidá vlastní rolovací lištu.
Všechny moderní prohlížeče, Internet Explorer čtvrté verze, NN4 to neumí.
Na pomalejších počítačích (CPU pod 400, záleží hlavně na grafické kartě) způsobuje hodnota fixed pomalejší rolování, protože se to musí přepočítávat.
Prohlížeč | Podpora ve verzích | Poznámka |
---|---|---|
Internet Explorer |
všechny | IE 9 navíc zvládá hodnotu local |
Mozilla | všechny verze | nezvládá hodnotu local |
Chrome | ano | local zvládá |
Android | žádná verze | prý ani androidí Chrome |
Nejčastější použití přibitého pozadí se váže k celé stránce (tag <body>)
body {background-image: url("pozadi.gif"); background-attachment: fixed}
Dá se to ale použít u libovolného prvku (třeba <div>), který může rolovat. Aby mohl div rolovat, dá se mu overflow: auto a výška:
div {background-image: url("pozadi.gif"); overflow: auto; height: 20em; background-attachment: fixed}
Jak psát web píše Yuhů, Dušan Janovský. Kontakt.