Značkovací jazyk HTML umožňuje webovému návrháři použít jakýkoli obrázek jako obrázek na pozadí. Samotnému jazyku však chybí integrované ovládací prvky pro obrázky na pozadí. Jemnější doladění se provádí pomocí kaskádových šablon stylů CSS.
Instrukce
Krok 1
Chcete-li, aby se pozadí roztáhlo na celou šířku prohlížeče, musíte ve svém CSS použít parametr z-index. Umožňuje vám nastavit pořadí prvků, které vytvoříte. Čím vyšší je hodnota tohoto atributu, tím vyšší bude blok umístěn na stránce.
Krok 2
Vytvořte nové dokumenty ve formátu html a css (pravé tlačítko myši - „Nový“- „Textový soubor“) a otevřete je pomocí libovolného textového editoru.
Krok 3
Umístěte obrázek na pozadí na spodní vrstvu. Roztahuje se v závislosti na rozlišení obrazovky. V horní části bude umístěn další prvek, na kterém bude zobrazen obsah stránky. Chcete-li to provést, vytvořte dva bloky. Do souboru css napište:.1layer {z-index: 1; šířka: 100% výška: 100% pozice: absolutní;}. 2layer {poloha: absolutní; z-index: 2; } Parametr position: absolute umožňuje nastavit absolutní umístění, tj. vrstva bude umístěna nezávisle na ostatních prvcích.
Krok 4
Zahrňte vygenerovaný kód CSS do souboru HTML pomocí značky odkazu: Pozadí stránky
Krok 5
Vytvořte novou vrstvu. Používání značky
umístěte na něj obrázek. Například: Obsah stránky U obrázku je zadán pouze parametr width, protože pokud zadáte dodatečně výšku, v některých prohlížečích se objeví zkreslení obrazu.
Krok 6
Uložte změny. Chcete-li otestovat svůj kód, zvětšete stránku v okně prohlížeče. Obrázek na pozadí by měl být také zvětšen.
