Background-attachment
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.
Podpora
Všechny moderní prohlížeče. Background-attachment je jedna z nejstarších CSS vlastností, tak není divu.
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 | hodnota local |
|---|---|---|
|
Internet Explorer |
všechny | od IE 9 |
| Mozilla | všechny verze | zvládá |
| Chrome | všechny | local zvládá |
Příklady
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}
Reklama
