Schopnost natáhnout obrázek na pozadí na celou šířku okna prohlížeče pomocí CSS se objevila až s vydáním jeho nejnovější specifikace - CSS3. Bohužel zatím velké množství webových surfařů používá časné prohlížeče, které nerozumí specifikaci CSS3. Proto si musíte vybrat - buď použijte méně pohodlné, ale řešení pro různé prohlížeče, nebo špičkovou technologii, ale pro omezené publikum. Zvažme obě možnosti.
Nezbytné
Základní znalost HTML a CSS
Instrukce
Krok 1
První možnost je založena na dřívějších specifikacích jazyka CSS. Musíte vytvořit strukturu kódu HTML, která má dvě překrývající se vrstvy, jednu nad druhou. Layers (div) can be stretched to the width of the screen in the old cascading style description language language. Ve spodní části vrstev musíte umístit obrázek na pozadí a do horní části umístit veškerý obsah stránky. Taková struktura v těle dokumentu může vypadat takto:
Toto bude obsah stránky
A popis stylů pro tuto strukturu by měl být umístěn v záhlaví. Například toto:
html, tělo {
okraj: 0px;
výška: 100%;
}
#Pozadí {
pozice: absolutní;
šířka: 100%;
výška: 100%;
}
#body {
pozice: absolutní;
šířka: 100%;
výška: 100%;
z-index: 2;
}
Zde jsou vrstvy s pozadím ID (toto je váš obrázek na pozadí) a tělem (to je vrstva obsahu stránky) nastaveny na absolutní umístění a 100% šířku a výšku. Obsahové vrstvě je navíc přiřazeno pořadové číslo z-index = 2. Určuje „hloubku“vrstev - čím větší je, tím dále od „spodní části“je tato vrstva umístěna. V našem případě to bude nad vrstvou pozadí, která používá výchozí z-index.
Krok 2
Celý kód může vypadat takto:
html, tělo {
okraj: 0px;
výška: 100%;
}
#Pozadí {
pozice: absolutní;
šířka: 100%;
výška: 100%;
}
#body {
pozice: absolutní;
šířka: 100%;
výška: 100%;
z-index: 2;
}
Toto bude obsah stránky
Nezapomeňte nahradit název souboru obrázku pozadí fon.png.
Krok 3
Druhá možnost použije vlastnost velikosti pozadí představenou v CSS3. Zároveň přidejte podobné vlastnosti k definicím stylů, které dříve používaly prohlížeče Mozilla Firefox, Google Chrome a Opera. Blok popisu stylu v této verzi může vypadat takto:
html {
pozadí: url (fon.png) opraven střed bez opakování;
-webkit-background-size: obal;
-moz-velikost pozadí: obal;
-o-pozadí-velikost: obal;
velikost pozadí: obal;
}
A zde nezapomeňte nahradit název souboru obrázku pozadí fon.png. A v těle samotného dokumentu nejsou v této verzi vyžadovány žádné speciální konstrukce.
