Вёрстка вэб-сайта: як у html зрабіць фон малюначкам

Шматлікія пачаткоўцы вярстальшчыкі, толькі ўнікаць у сутнасць стварэння сайтаў, часта задаюцца пытаннем, як у html зрабіць фон малюначкам. І калі некаторыя і могуць разабрацца з гэтай задачай, то ўсё роўна ўзнікаюць праблемы падчас расцягу малюнка на ўсю шырыню манітора. Пры гэтым хацелася б, каб сайт аднолькава адлюстроўваўся на ўсіх браўзэрах, таму павінна выконвацца патрабаванне кроссбраузерности. Можна ўсталяваць фон двума спосабамі: з дапамогай HTML тэгаў і CSS стылю. Кожны сам для сябе выбірае найбольш аптымальны варыянт. Вядома, CSS стыль значна зручней, бо яго код захоўваецца ў асобным файле і не займае лішнія калонкі ў асноўных тэгах сайта, але перш за разгледзім просты метад ўстаноўкі малюнка на фон сайта.

Асноўныя тэгі HTML для стварэння фону

Такім чынам, пераходзім да пытання, як зрабіць карцінку фонам у html на ўвесь экран. Для таго каб сайт прыгожа выглядаў, неабходна разумець адну досыць важную дэталь: дастаткова проста зрабіць Градыентнае фон або зафарбаваць яго аднатонным колерам, але калі вам неабходна ўставіць на задні план карцінку, яна не будзе расцягвацца на ўсю шырыню манітора. Малюнак першапачаткова трэба падабраць або самастойна зрабіць дызайн з такім пашырэннем, у якім у вас будзе адлюстроўвацца старонка сайта. Толькі пасля таго як фонавы малюнак гатова, пераносім яго ў тэчку з назвай «Images». У ёй мы будзем захоўваць усе выкарыстоўваныя карцінкі, анімацыі і іншыя графічныя файлы. Гэтая тэчка павінна знаходзіцца ў каранёвым каталогу з усімі вашымі файламі html. Цяпер можна пераходзіць і да кода. Існуе некалькі варыянтаў запісу кода, з дапамогай якога фон будзе мяняцца на малюнак.

1. Напісаць атрыбутам тэга.
2. Праз CSS стыль у HTML кодзе.
3. Напісаць CSS стыль у асобным файле.

Як у HTML зрабіць фон малюначкам, вырашаць вам, але хацелася б сказаць пару слоў пра тое, як было б найбольш аптымальна. Першы метад з дапамогай напісання праз атрыбут тэга ўжо даўно састарэў. Другі варыянт выкарыстоўваецца ў вельмі рэдкіх выпадках, толькі таму што атрымліваецца шмат аднолькавага кода. А трэці варыянт самы распаўсюджаны і эфектыўны. Вось HTML прыклады тэгаў:

1. Першы спосаб запісу праз атрыбут тэга (body) у файле index.htm. Ён запісваецца ў такім выглядзе: (body background = "Название_папки / Название_картинки.расширение") (/ body). То бок, калі ў нас карцінка з назвай «Picture» і пашырэннем JPG, а тэчку мы назвалі як «Images», тады запіс HTML-кода будзе выглядаць так: (body background = "Images / Picture.jpg") ... (/ body) .
2. Другі метад запісу закранае CSS стыль, але запісваецца ў тым жа файле з назвай index.htm. (Body style = "background: url ( '../ Images / Picture.jpg')").
3. І трэці спосаб запiсу ажыццяўляецца ў двух файлах. У дакуменце з назвай index.htm ў тэгу (head) запісваецца такі радок: (head) (link rel = "stylesheet" type = "text / css" href = "http: // site / article / 193110 /% D0% 9F % D1% 83% D1% 82% D1% 8C_% D0% BA CSS_файлу ") (/ head). А ў файле стыляў з назвай style.css ўжо запісваем: body {background: url (Images / Picture.jpg ')}.

Як у HTML зрабіць фон малюначкам, мы разабралі. Зараз неабходна зразумець, як расцягнуць карцінку па шырыні ўсяго экрана.

Спосабы расцягу фонавай карцінкі на шырыню акна

Уявім наш экран у працэнтных выглядзе. Атрымліваецца, што ўся шырыня і даўжыня экрана будзе складаць 100% х 100%. Нам неабходна расцягнуць карцінку на гэтую шырыню. Дадамо да запісу выявы ў файл style.css радок, якая і будзе расцягваць малюнак на ўсю шырыню і даўжыню манітора. Як гэта запісваецца ў CSS стылі? Усё проста!

body

{

background: url (Images / Picture.jpg ')

background-size: 100%; / * Такая запіс падыдзе для большасці сучасных браўзэраў * /

}

Вось мы і разабралі, як зрабіць карцінку фонам у html на ўвесь экран. Ёсць яшчэ спосаб запісу ў файле index.htm. Хоць гэты метад і састарэлы, але для пачаткоўцаў неабходна яго ведаць і разумець. У тэгу (head) (style) div {background-size: cover; } (/ Style) (/ head) гэты запіс азначае, што мы вылучаем спецыяльны блок для фону, які будзе пазіцыянавацца па ўсёй шырыні акна. Мы разгледзелі 2 спосабу, як зрабіць фон сайта малюначкам html, каб малюнак расцягвалася на ўсю шырыню экрана ў любым з сучасных браўзэраў.

Як зрабіць фіксаваны фон

Калі вы вырашылі выкарыстаць карцінку ў якасці фону будучага вэб-рэсурсу, тады вам проста неабходна даведацца, як яго зрабіць нерухомым, каб ён не расцягваўся у даўжыню і не псаваў эстэтычны выгляд. Дастаткова проста з дапамогай HTML кода прапісаць гэта невялікае дадатак. Вам неабходна ў файле style.css дапісаць адну фразу пасля background: url (Images / Picture.jpg ') fixed; або замест яе дадаць пасля кропкі з коскай асобную радок - position: fixed. Такім чынам, ваш фонавы малюнак стане нерухомым. Падчас прагорткі кантэнту на сайце, вы ўбачыце, што тэкставыя радкі рухаюцца, а фон застаецца на месцы. Вось вы і навучыліся, як у html зрабіць фон малюначкам, некалькімі спосабамі.

Праца з табліцай ў HTML

Многія нявопытныя вэб-распрацоўшчыкі, сутыкаючыся з табліцамі і блокамі, часта не разумеюць, як у html зрабіць карцінку фонам табліцы. Як і ўсе каманды HTML і CSS стылю, гэтая мова вэб праграмавання досыць просты. І рашэннем такой задачы будзе напісанне пары радкоў кода. Вы ўжо павінны ведаць, што напісанне таблічных радкоў і слупкоў пазначаецца адпаведна як тэгі (tr) і (td). Каб фон табліцы зрабіць у выглядзе малюнка, неабходна дапісаць да тэгу (table), (tr) або (td) простую фразу з указаннем спасылкі на малюнак: background = URL карцінкі. Для нагляднасці прывядзем пару прыкладаў.

Табліцы з малюначкам замест фону: HTML прыклады

Намалюем табліцу 2х3 і зробім яе фонам карцінку, захаваную ў тэчцы "Images": (table background = "Images / Picture.jpg") (tr) (td) 1 (/ td) (td) 2 (/ td) (td) 3) (/ td) (/ tr) (tr) (td) 4 (/ td) (td) 5 (/ td) (td) 6 (/ td) (/ tr) (/ table). Так наша табліца будзе закрашена ў фон карцінкі.

Цяпер намалюем гэтую ж таблічку памерамі 2х3, але уставім карцінку ў слупкі пад нумарам 1, 4, 5 і 6. (table) (tr) (td background = "Images / Picture.jpg") 1 (/ td) (td) 2 (/ td) (td) 3 (/ td) (/ tr) (tr) (td background = "Images / Picture.jpg") 4 (/ td) (td background = "Images / Picture.jpg") 5 ( / td) (td background = "Images / Picture.jpg") 6 (/ td) (/ tr) (/ table). Пасля прагляду бачым, што фон з'яўляецца толькі ў тых вочках, у якіх мы прапісалі, а не ва ўсёй табліцы.

Кроссбраузерность сайта

Існуе яшчэ такое паняцце, як кроссбраузерность вэб-рэсурсу. Гэта азначае, што старонкі сайта будуць аднолькава правільна адлюстроўвацца ў розных тыпах і версіях браўзэраў. Пры гэтым трэба HTML код і CSS стыль падганяць пад неабходныя браўзэры. Акрамя таго, у сучасны час развіцця смартфонаў многія вэб-распрацоўнікі імкнуцца стварыць сайты, адаптаваныя і пад мабільныя версіі і пад камп'ютэрную выгляд.