Ïîñòàâèòè ôîíîâèé ìàëþíîê íà ñàéò - ï'ÿòèõâèëèííå ñïðàâó. Êóäè á³ëüøå ÷àñó éäå íà ï³äãîòîâêó çîáðàæåííÿ - äîá³ðêó, êîðèãóâàííÿ, äîäàâàííÿ åôåêò³â, êîìïîíîâêó äåê³ëüêîõ ³ëþñòðàö³é â îäèí ãðàô³÷íèé ôàéë.
²íñòðóêö³ÿ
Çà êåðóâàííÿ ôîíîì â³äïîâ³äຠàòðèáóò background. Ùîá ð³âíîì³ðíî çàëèòè ñòîð³íêó îäíèì êîëüîðîì, âèêîðèñòîâóéòå òåã ñòèëþ â body: . Âèéäå ÷îðíèé ôîí. ßêùî çàñòîñîâóºòå CSS, â head ïîñòàâòå:
Ç äîïîìîãîþ çâ'ÿçêè çàäàºòüñÿ ïîâòîðþâàíå çîáðàæåííÿ. Àäðåñà âêàçóºòüñÿ ó âèãëÿä³ çîâí³øíüî¿ àáî âíóòð³øíüî¿ ïîñèëàííÿ. Ïðè âèêîðèñòàíí³ òàêîãî ìåòîäó âàæëèâî, ùîá ñòèêè ì³æ êàðòèíêàìè çàëèøàëèñÿ íåïîì³òíèìè, ³íàêøå ñòîð³íêà áóäå âèãëÿäàòè íåîõàéíî. Ó CSS âèêîðèñòîâóéòå:.
Ïîâòîðåííÿì ìàëþíêà ìîæíà óïðàâëÿòè. Çà öþ ôóíêö³þ â³äïîâ³äຠbackground-repeat ðàçîì ç òàêèìè åëåìåíòàìè: - repeat-x - ïîâòîðåííÿ ïî ãîð³çîíòàë³-- repeat-y - ïîâòîðåííÿ ïî âåðòèêàë³: - repeat - ïîâòîðåííÿ â îáîõ íàïðàâëåí³ÿõ-- no-repeat - áåç ïîâòîðåí³ÿ.Çàäàåòñÿ òàê:
Ðîçòàøóâàòè çîáðàæåííÿ â ïîòð³áí³é ÷àñòèí³ web-ñòîð³íêè äîïîìàãຠbackground-position. Êîîðäèíàòè ìîæíà çàäàòè çà äîïîìîãîþ ïðîöåíòíîãî ñï³ââ³äíîøåííÿ (50% 75%), ñàíòèìåòð³â (5cm 5cm), ï³êñåëüíî¿ ïðîïîðö³¿ (200px 400px), ñëîâåñíî¿ ôîðìè (left, right, top, center, bottom). Íàïðèêëàä: Çíà÷åííÿ 0% 0% îäíî top left.
Âëàñòèâ³ñòü background-attachment âêàçóº íà ñïîñ³á ïðîêðóòêè çîáðàæåíü: ðàçîì ç³ ñòîð³íêè (background-attachment: scroll) ÷è í³ (background-attachment: fixed).