Võimalus sirvida taustapilt brauseriakna täies laiuses CSS-i abil ilmnes alles selle uusima spetsifikatsiooni - CSS3 - väljaandmisega. Kahjuks kasutab siiani suur osa veebisurfareid varajasi brausereid, mis ei mõista CSS3 spetsifikatsiooni. Seetõttu peate tegema valiku - kas kasutama vähem mugavat, kuid brauseriteülest lahendust või kõrgtehnoloogilist, kuid piiratud publikule. Mõelgem mõlemale võimalusele.
Vajalik
Põhiteadmised HTML-ist ja CSS-ist
Juhised
Samm 1
Esimene võimalus põhineb CSS-i keele varasematel spetsifikatsioonidel. Peate looma HTML-koodi struktuuri, millel on kaks üksteise kohal asuvat kihti. Kihte (div) saab ekraani laiuseni venitada vanas kaskaadstiilis kirjelduskeele spetsifikatsioonis. Kihtide allservas peate paigutama taustpildi ja ülemisse asetage kogu lehe sisu. Selline dokumendi põhiosa struktuur võib välja näha järgmine:
Sellest saab lehe sisu
Ja selle struktuuri stiilide kirjeldus tuleks paigutada pealkirjaossa. Näiteks:
HTML, body {
veeris: 0px;
kõrgus: 100%;
}
#background {
positsioon: absoluutne;
laius: 100%;
kõrgus: 100%;
}
#body {
positsioon: absoluutne;
laius: 100%;
kõrgus: 100%;
z-indeks: 2;
}
Siin seatakse ID-de taustaga (see on teie taustapilt) ja kehaga (see on lehe sisu kiht) kihid absoluutsele positsioneerimisele ning 100% laiusele ja kõrgusele. Lisaks omistatakse sisukihile seerianumber z-indeks = 2. See määrab kihtide "sügavuse" - mida suurem see on, seda kaugemal "alt" see kiht asub. Meie puhul on see taustkihi kohal, mis kasutab vaikimisi z-indeksit.
2. samm
Kogu kood võib välja näha järgmine:
HTML, body {
veeris: 0px;
kõrgus: 100%;
}
#background {
positsioon: absoluutne;
laius: 100%;
kõrgus: 100%;
}
#body {
positsioon: absoluutne;
laius: 100%;
kõrgus: 100%;
z-indeks: 2;
}
Sellest saab lehe sisu
Ärge unustage taustpildi failinime fon.
3. samm
Teine võimalus kasutab CSS3-s sisse viidud tausta suuruse atribuuti. Samal ajal lisage stiilide definitsioonidele sarnased omadused, mida varem kasutasid brauserid Mozilla Firefox, Google Chrome ja Opera. Selle versiooni stiilikirjelduse plokk võib välja näha järgmine:
HTML {
taust: URL (fon.png) keskmist ei korrata;
-veebikomplekt-taust-suurus: kaas;
-moz-background-size: kate;
-o-background-size: kate;
tausta suurus: kate;
}
Ja siin ärge unustage asendada taustpildi faili nimi fon.png. Ja dokumendi põhiosas pole selles versioonis erilisi konstruktsioone vaja.
