CSS (3.) - pozadie stránky
Autor: Dušan Koleno | Vydaný: 08.04.2006
Je tu tretie pokračovanie seriálu o CSS. V tomto pokračovaní načrtnem pár funkcií, ktoré slúžia v CSS na upravovanie pozadia, či už stránky alebo nejakého objektu.
Farba pozadia
Background-color je prvá funkcia, ktorú v tomto článku predstavím. Táto funkcia nastaví farbu pozadia. Hodnotou môžu byť farby zapísané v angličtine alebo v RGB.
1. CSS
body {background-color: red}
2. HTML
<body> Stránka bude zobrazená s červeným pozadím. </body>
Obrázok na pozadí
Ďalšou možnosťou skrášlenia stránky je obrázkové pozadie. Na vloženie obrázku do pozadia používame funkciu background-image, ktorá nadobudne hodnotu napr.: url('obrazok.gif').
Problémom v stránke môže byť niekedy opakovanie pozadia stránky, ak chcete ovplyvniť opakovanie pozadia, tak v CSS na to existuje funkcia background-repeat. Jej hodnoty môžu byť: repeat (klasicke opakovanie obrázku), no-repeat (obrázok sa nebude opakovať), repeat-y (vertikálne opakovanie obrázku), repeat-y (horizontálne opakovanie obrázku).
Pri obrázkovom pozadí si ešte môžete nastaviť aj polohu obrázku pomocu funkcie background-position. Táto funkcia sa väčšinou používa vtedy, ak sme pozadie nejako ovplyvnili funkciou background-repeat, pretože ak je pozadie zobrazené všade jeho poloha bude stále tá istá. Background-position môže obsahovať hodnoty v percentách, vo veľkostných jednotkách alebo jednoducho slovom. Background-position vždy obsahuje 2 hodnoty za sebou, napríklad: background-position: top right; - toto zaistí, že sa obrázok na pozadí bude nachádzať v pravom hornom rohu, tiež môžeme použiť alternatívu v percentách background-position: 100% 0%. Slová, ktoré môžeme používať v hodnote background-position sú: top (zarovnanie nahor), bottom (zarovnanie nadol), left (zarovnanie doľava), right (zarovnanie doprava), center (nastred), hodnotu center môžeme použiť vo funkcii background-position aj samotnú.
Poslednou funkciou, ktorú pri obrázkovom pozadí využijeme je Background-attachment. Táto funkcia zadáva, či sa bude obrázok posuvať spolu s textom, alebo bude stáť stále na tom istom mieste. Hodnoty funkcie sú scroll (pozadie sa pohybuje spolu s textom), fixed (pozadie je nezávyslé na pohybovaní textom).
1. CSS
body {background-image: url('obrazok.gif'); background-repeat: no-repeat; background-position: center; background-attachment: fixed;}
2. HTML
<body> Na strede stránky bude zobrazený bez opakovania obrázok obrazok.gif. Pri scrollovaní bude pozadie stáť na mieste. </body>
Všetko v jednom
Ak chcete zapísať všetky tieto funkcie do jednej, môžete použiť funkciu background. Do tejto funkcie budete zapisovať hodnoty jednotlivých funkcií zaradom, odďeľovať ich budete čiarkami (môžete zapisovať aj bez čiarok, stačia medzery). Jednotlivo pôjdu za sebou funkcie background-color, background-image, background-repeat, background-attachment, background-position. Pochopíte na príklade nižšie.
1. CSS
body {background: red, url('obrazok.gif'), no-repeat, fixed, top left;
2. HTML
<body> V hornom ľavom rohu bude obrázok, okolo bude červená farba. To všetko je zapísané v jednej funkcii background. </body>
Koniec
Raz to muselo prísť, myslím tým koniec. Nabudúce napíšem niečo o orámovaní v CSS.