Background-attachment

CSS vlastnost background-attachment určuje rolování obrázkového pozadí.

background-attachment
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, 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.

Podpora background-attachment
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

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

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.