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é |
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ě. Jestliže mám naopak 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).
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 |
4, 5, 5.5, 6 | |
Mozilla | všechny verze | |
Opera | 4, 5, 6, 7 | |
Konqueror | nevím | |
IE 5 / Mac | ano | |
Netscape Navigator 4 | ne |
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. Poslední aktualizace 13. února 2005.