Schopnosť roztiahnuť obrázok na pozadí na celú šírku okna prehliadača pomocou CSS sa objavila až s vydaním jeho najnovšej špecifikácie - CSS3. Bohužiaľ, zatiaľ veľké množstvo webových surfujúcich používa skoré prehliadače, ktoré nerozumejú špecifikácii CSS3. Preto si musíte vybrať - buď použite menej pohodlné, ale riešenie pre rôzne prehliadače, alebo špičkovú technológiu, ale pre obmedzené publikum. Zvážme obe možnosti.
Nevyhnutné
Základné znalosti HTML a CSS
Inštrukcie
Krok 1
Prvá možnosť je založená na starších špecifikáciách jazyka CSS. Musíte vytvoriť štruktúru kódu HTML, ktorá má dve prekrývajúce sa vrstvy, jednu nad druhou. Vrstvy (div) je možné roztiahnuť na šírku obrazovky v starej jazykovej špecifikácii kaskádového štýlu. Do spodnej časti vrstiev musíte umiestniť obrázok na pozadí a do hornej časti umiestnite všetok obsah stránky. Takáto štruktúra v tele dokumentu môže vyzerať takto:
Toto bude obsah stránky
A popis štýlov pre túto štruktúru by mal byť umiestnený v nadpisovej časti. Napríklad toto:
html, body {
okraj: 0px;
výška: 100%;
}
#pozadie {
pozícia: absolútna;
šírka: 100%;
výška: 100%;
}
#body {
pozícia: absolútna;
šírka: 100%;
výška: 100%;
z-index: 2;
}
Tu sú vrstvy s pozadím ID (toto je váš obrázok na pozadí) a textom (toto je vrstva pre obsah stránky) nastavené na absolútne umiestnenie a 100% šírku a výšku. Okrem toho je obsahovej vrstve pridelené poradové číslo z-index = 2. Určuje „hĺbku“vrstiev - čím je väčšia, tým ďalej od „spodnej časti“sa táto vrstva nachádza. V našom prípade to bude nad vrstvou pozadia, ktorá používa predvolený z-index.
Krok 2
Celý kód môže vyzerať takto:
html, body {
okraj: 0px;
výška: 100%;
}
#pozadie {
pozícia: absolútna;
šírka: 100%;
výška: 100%;
}
#body {
pozícia: absolútna;
šírka: 100%;
výška: 100%;
z-index: 2;
}
Toto bude obsah stránky
Nezabudnite nahradiť názov súboru obrázka na pozadí fon.png.
Krok 3
Druhá možnosť použije vlastnosť veľkosti pozadia zavedená v CSS3. Zároveň pridajte podobné vlastnosti k definíciám štýlov, ktoré predtým používali prehliadače Mozilla Firefox, Google Chrome a Opera. Blok popisu štýlu v tejto verzii môže vyzerať takto:
html {
pozadie: url (fon.png) opravené centrum bez opakovania;
-webkit-veľkosť pozadia: obal;
-moz-veľkosť pozadia: obal;
-o-veľkosť pozadia: obal;
veľkosť pozadia: obal;
}
A tu nezabudnite nahradiť názov súboru obrázka na pozadí fon.png. A v tele samotného dokumentu nie sú v tejto verzii potrebné žiadne špeciálne konštrukcie.
