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 (nefunguje ve Firefoxu a starších IE) |
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).
Podpora
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 |
| Opera | všechny verze | local asi od verze 10.5 |
| Chrome | ano | 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
