ßê çðîáèòè íåðóõîìèé ôîí
ôîí âåá-ñòîð³íêè ìîæå áóòè ïðèâ`ÿçàíèé äî ¿¿ âì³ñòó àáî âåñòè ñåáå íåçàëåæíî â³ä íüîãî. Ó ïåðøîìó âèïàäêó ïðè ïðîêðó÷óâàíí³ âì³ñòó ó â³êí³ áðàóçåðà ôîíîâå çîáðàæåííÿ òåæ áóäå ïðîêðó÷óâàòèñÿ, à â äðóãîìó âîíî ìîæå çàëèøàòèñÿ íåðóõîìèì. Äëÿ ðåàë³çàö³¿ ô³êñîâàíîãî çàäíüîãî ïëàíó ñòîð³íêè ñë³ä âèêîðèñòîâóâàòè ìîâó îïèñó ñòèë³â CSS - ò³ëüêè â³í ìîæå ãàðàíòóâàòè îäíàêîâå ïîâåä³íêà ôîíó â ð³çíèõ òèïàõ áðàóçåð³â.
1
Âèêîðèñòàéòå íàÿâíèé â CSS âëàñòèâ³ñòü background-attachment, ùîá âêàçàòè ÷è ïîâèíåí áóòè ôîí ñòîð³íêè ô³êñîâàíèì àáî ðóõîìèì. Âñüîãî öå âëàñòèâ³ñòü ìîæå ìàòè òðè çíà÷åííÿ - ÿêùî âè íå âêàçóºòå í³ÿêîãî ç íèõ, òî çà çàìîâ÷óâàííÿì ââàæàºòüñÿ, ùî background-attachment ìຠçíà÷åííÿ scroll. Ïðè òàêîìó çíà÷åíí³ ôîíîâå çîáðàæåííÿ ïðîêðó÷óºòüñÿ ðàçîì ç êîíòåíòîì ñòîð³íêè. Çíà÷åííÿ inherit êîï³þº ïîâåä³íêó ôîíó áàòüê³âñüêîãî åëåìåíòó, à çíà÷åííÿ fixed ðîáèòü ôîíîâó êàðòèíêó íåçàëåæíî¿ â³ä âì³ñòó - âîíî çàëèøàòèñÿ íåðóõîìèì ïðè ïðîêðó÷óâàíí³ ñòîð³íêè. Éîãî âàì ³ ñë³ä âèêîðèñòîâóâàòè.
2
ϳäãîòóéòå CSS-³íñòóêö³³ äëÿ âèêîðèñòàííÿ â ñòîð³íêàõ, ôîí ÿêèõ ïîòð³áíî çàô³êñóâàòè. ßêùî âè íå áóäåòå ïîì³ùàòè CSS-êîä ó çîâí³øí³é ôàéë îïèñó ñòèë³â, òî ö³ ³íñòðóêö³¿ òðåáà ðîçì³ñòèòè ì³æ â³äêðèâຠ³ çàêðèâຠòåãàìè style: Îïèñ ïîâåä³íêè ôîíó ñòîð³íêè ïîòð³áíî ïðèâ`ÿçàòè äî åëåìåíòó BODY - â òåðì³íîëî㳿 ìîâè CSS â³í áóäå íàçèâàòèñÿ «ñåëåêòîðîì» ³ çàïèñóâàòèñÿ áóäå òàê : BODY {
// Òóò áóäóòü îïèñó ò³ëà ñòîð³íêè
} Âëàñòèâîñò³, ùî ñòîñóþòüñÿ ö³º¿ ñåëåêòîðó òðåáà ðîçì³ñòèòè âñåðåäèí³ ô³ãóðíèõ äóæîê, ðîçä³ëÿþ÷è ¿õ êðàïêîþ ç êîìîþ: BODY {
background-attachment: fixed;
background-image: url (images / BG.jpg);
} Ïåðøèé ðÿäîê ô³êñóº ôîíîâå çîáðàæåííÿ, à äðóãà âêàçóº àäðåñó ôàéëó, ùî ì³ñòèòü ôîíîâó êàðòèíêó, ùîäî àäðåñè ñòîð³íêè. Ö³ äâà ðÿäêè ìîæíà çàïèñàòè ³ â îäí³é ñêëàäí³é CSS-³íñòðóêö³¿ òàêèì ÷èíîì: background: url (images / BG.jpg) fixed-
// Òóò áóäóòü îïèñó ò³ëà ñòîð³íêè
} Âëàñòèâîñò³, ùî ñòîñóþòüñÿ ö³º¿ ñåëåêòîðó òðåáà ðîçì³ñòèòè âñåðåäèí³ ô³ãóðíèõ äóæîê, ðîçä³ëÿþ÷è ¿õ êðàïêîþ ç êîìîþ: BODY {
background-attachment: fixed;
background-image: url (images / BG.jpg);
} Ïåðøèé ðÿäîê ô³êñóº ôîíîâå çîáðàæåííÿ, à äðóãà âêàçóº àäðåñó ôàéëó, ùî ì³ñòèòü ôîíîâó êàðòèíêó, ùîäî àäðåñè ñòîð³íêè. Ö³ äâà ðÿäêè ìîæíà çàïèñàòè ³ â îäí³é ñêëàäí³é CSS-³íñòðóêö³¿ òàêèì ÷èíîì: background: url (images / BG.jpg) fixed-
3
Âñòàâòå âåñü êîä äëÿ ô³êñàö³¿ ôîíó â òåêñò ñòîð³íêè. Ó çàê³í÷åíîìó âèãëÿä³ â³í ìîæå âèãëÿäàòè, íàïðèêëàä, òàê: Çðîçóì³ëî, âàì òðåáà çàì³íèòè àäðåñó ðîçì³ùåííÿ ³ íàçâà ôàéëó ôîíîâî¿ êàðòèíêè. Êîä êðàùå ïîì³ñòèòè ïåðåä òåãîì, õî÷à öå ³ íå îáîâ`ÿçêîâà óìîâà.
Ñòàòò³ çà òåìîþ "ßê çðîáèòè íåðóõîìèé ôîí"
Îö³í³òü, áóäü ëàñêà ñòàòòþ