Značkovací jazyk HTML umožňuje webdizajnérovi použiť akýkoľvek obrázok ako obrázok na pozadí. Samotnému jazyku však chýbajú vstavané ovládacie prvky pre obrázky na pozadí. Jemnejšie doladenie sa vykonáva pomocou kaskádových šablón štýlov CSS.
Inštrukcie
Krok 1
Ak chcete, aby sa pozadie roztiahlo na celú šírku prehliadača, musíte vo svojom CSS použiť parameter z-index. Umožňuje vám nastaviť poradie prvkov, ktoré vytvoríte. Čím vyššia je hodnota tohto atribútu, tým vyššia bude blok umiestnená na stránke.
Krok 2
Vytvorte nové dokumenty vo formáte html a css (pravé tlačidlo myši - „Nové“- „Textový súbor“) a otvorte ich pomocou ľubovoľného textového editora.
Krok 3
Na spodnú vrstvu umiestnite obrázok na pozadí. Roztiahne sa v závislosti od rozlíšenia obrazovky. V hornej časti bude umiestnený ďalší prvok, na ktorom sa zobrazí obsah stránky. Za týmto účelom vytvorte dva bloky. Do súboru css napíšte:.1layer {z-index: 1; šírka: 100% výška: 100% poloha: absolútna;}. 2vrstva {pozícia: absolútna; z-index: 2; } Parameter position: absolute umožňuje nastaviť absolútne umiestnenie, t.j. vrstva bude umiestnená nezávisle od ostatných prvkov.
Krok 4
Zahrňte vygenerovaný kód CSS do súboru HTML pomocou značky odkazu: Pozadie stránky
Krok 5
Vytvorte novú vrstvu. Pomocou značky
umiestnite na ňu obrázok. Napríklad: Obsah stránky Pre img je zadaný iba parameter width, pretože ak zadáte dodatočne výšku, v niektorých prehľadávačoch sa objaví skreslenie obrazu.
Krok 6
Uložte zmeny. Ak chcete svoj kód otestovať, zväčšite stránku v okne prehliadača. Zväčšiť by sa mal aj obrázok na pozadí.
