CSS көмегімен фондық суретті браузер терезесінің бүкіл еніне дейін созу мүмкіндігі тек оның соңғы сипаттамасы - CSS3 шыққаннан кейін пайда болды. Өкінішке орай, әзірге веб-серферлердің көп бөлігі CSS3 спецификациясын түсінбейтін ерте браузерлерді қолданады. Сондықтан таңдау жасауыңыз керек - неғұрлым ыңғайлы емес, бірақ кросс-браузер шешімін немесе жоғары технологияны қолданыңыз, бірақ шектеулі аудитория үшін. Екі нұсқаны да қарастырайық.
Қажетті
HTML және CSS туралы негізгі білім
Нұсқаулық
1-қадам
Бірінші нұсқа CSS тілінің ертерек сипаттамаларына негізделген. Сізге бір-бірінің үстінде екі қабаттасатын қабаттардан тұратын HTML-код құрылымын құру қажет. Ескі каскадтық стильді сипаттау тілінің сипаттамасында қабаттарды (div) экранның еніне дейін созуға болады. Қабаттардың төменгі жағында фондық суретті, ал жоғарғы жағында парақтың барлық мазмұнын орналастыру керек. Құжат мәтініндегі мұндай құрылым келесідей болуы мүмкін:
Бұл парақтың мазмұны болады
Бұл құрылымға арналған стильдердің сипаттамасы тақырып бөлімінде орналасуы керек. Мысалы, бұл:
html, негізгі мәтін {
маржа: 0px;
биіктігі: 100%;
}
# артқы алаң {
позиция: абсолютті;
ені: 100%;
биіктігі: 100%;
}
# дене {
позиция: абсолютті;
ені: 100%;
биіктігі: 100%;
z-индексі: 2;
}
Мұнда идентификаторлары бар қабаттар (бұл сіздің фондық суретіңіз) және денесі (бұл бет мазмұны үшін қабат) абсолютті позицияға және ені мен биіктігіне 100% орнатылған. Сонымен қатар, мазмұн деңгейіне z-индексінің реттік нөмірі беріледі = 2. Ол қабаттардың «тереңдігін» анықтайды - ол неғұрлым үлкен болса, соғұрлым бұл қабат «төменгі жақтан» орналасады. Біздің жағдайда, ол әдепкі z-индексін қолданатын фондық қабаттан жоғары болады.
2-қадам
Толық код келесідей болуы мүмкін:
html, негізгі мәтін {
маржа: 0px;
биіктігі: 100%;
}
# артқы алаң {
позиция: абсолютті;
ені: 100%;
биіктігі: 100%;
}
# дене {
позиция: абсолютті;
ені: 100%;
биіктігі: 100%;
z-индексі: 2;
}
Бұл парақтың мазмұны болады
Фондық фон.
3-қадам
Екінші нұсқа CSS3-те енгізілген фон өлшемін қолданады. Сонымен қатар, Mozilla Firefox, Google Chrome және Opera браузерлері бұрын қолданған стиль анықтамаларына ұқсас қасиеттерді қосыңыз. Осы нұсқадағы стильді сипаттау блогы келесідей болуы мүмкін:
HTML {
фон: url (fon.png) қайталанбайтын орталық орталығы бекітілген;
-webkit-background-size: мұқаба;
-moz-background-size: мұқаба;
- өң-өлшем: мұқаба;
фондық өлшем: мұқаба;
}
Мұнда фон.png"
