Zde si ukážeme, jak lze docílit zajímavých efektů s pozadím stránky pomocí kaskádových stlylů...
Úvodem
Jistě jste se někdy na webu setkali s pozadím, které se samo rolovalo se stránkou, takže jste měli možnost vidět stále ten samý obrázek na pozadí na stejném míste monitoru. Pomocí css se dá s pozadím nebo obrázkem na pozadí dělat i více vychytávek, které se zde pokusím napsat.Barva pozadí
Barva pozadí je - vedle obrázků na pozadí - asi nejpoužívanější. Tuto vlastnost se nazívá background-color. Barvu jako takovou můžeme zapsat hexadecimálním kódem (např. #CC0000 - tato barva bude tmavě červená), a nebo anglickými názvy (white, red,...). A jak to zapíšeme v css:
body {background-color: #FFFFCC;}
Barva pozadí bude světle-žlutá. Background-colour je velmi dobře podporovaná vlastnost, zobrazuje se ve všech moderních prohlížečích, takže s použitím by neměl být problém;-)
Obrázek na pozadí
Také velice používaná vlastnost pozadí. Do css ji zapisujeme jako background-image. Background-image lze dále stylovat, o tom píši níže. Celá definice bude vypadat takto:
body {background-image: url(obrazek.png);}
Cesta k obrázku muže vést i na jinou srtránku, v tom případě místo "obrazek.gif" napíšeme celou adresu obrázku, umístěném na internetu (např. http://neco.cz/obrazky/pozadi.gif). Pro obrázek na pozadí se používají například formáty jpg, gif, a png. A málem bych zapoměl dodat, že obrázek na pozadí má přednost před barvou pozadí, tudíž jí překryje.
Opakování obrázku na pozadí
Obrázek se dá i "libovolně" opakovat po ose "x" a "y", dále se dá i nastavit no-repeat, čili "neopakovat". Opakování po ose "x" znamená, že se obrázek bude opakovat horizontálně, jmenuje se repeat-x. Z toho logicky vyplívá, že pokud se bude obrázek opakovat v ose "y", bude se opakovat "vertikálně", tedy odzhora dolů. To se nazívá repeat-y. Horizontální opakování pozadí zapíšeme takto
body {background-image: url(obrazek.png);
background-repeat: repeat-x;}
a vertikální takle
body {background-image: url(obrazek.png);
background-repeat: repeat-y;}
Prohodíme tedy jen písmenka x a y. Kdybychom nechtěli, aby se obrázek opakoval, zapíšeme to takto:
body {background-image: url(obrazek.png);
background-repeat: no-repeat;}
Background-repeat je u prohlížečů také velmi dobře podporovaná vlastnost. Také můžeme napsat repeat, ale je to zbytečné, protože když nic nezadáme, obrázek se bude opakovat automaticky.
Pozicování obrázku na pozadí
CSS vlastnost background-position určuje umístění obrázkového pozadí. Pozicování vychází z opakování obrázku po ose "x" a "y" (horizontálně a vertikálně). Pozicováním můžeme úrčit, jestli má být obrázek dole (bottom), v pravo (right), v levo (left), a nahoře (top). Pokud se bude obrázek opakovat horizontálně, pozicování v pravo a levo potřebovat nebudem.budeme-li chtít, aby byl obrázek, který se opakuje po ose "x", přimáčklý dole, napíšeme toto:
body {background-image: url(obrazek.png);
background-repeat: repeat-x;
bacgkround-position: bottom;
}
Nebudo zde vypisovat všechny možnosti, myslím že pozicování pozadí vlevo, vpravo, a nahoru by jste jistě zvládli;-)
Pozor! Netscape tuto vlastnost ignoruje, obrázek umístí do levého horního rohu!
Pozadí jako přibité
Vlastnost background-attachment určuje rolování obrázkového pozadí. Můžeme použít buď scroll pro rolování obrázku se stránkou, a nebo fixed, kydy se pozadí drží na místě, je přibité.Příklad pro rolování pozadí se stránkou:
body {background-image: url(obrazek.png);
background-attachment:scroll;}
a pro přibití pozadí, tedy aby se se stránkou nerolovalo, napíšeme místo scroll hodnotu fixed.
A podpora? Tuto vlstnost podporují zase všechny moderní prohlížeče, ale Internet Explorer čtvrté verze a NN4 to neumí.
To je asi tak vše, kdyby jste měli nějaké připomínky (jako že jich bude asi hodně) či dotazy, můžete se vyjádřit v diskusi.
David Kohout, www.kohoutovo.net
Autor: Kohout
2024 ©