Як додати фонове зображення в HTML

wikiHow працює за принципом вікі, а це означає, що багато наших статей написано кількома авторами. При створенні цієї статті над її редагуванням та покращенням працювали, у тому числі анонімно, 12 осіб.

Кількість переглядів цієї статті: 62 685.

Щоб додати зображення на веб-сторінку, знадобиться HTML, а щоб зображення зробити тлом веб-сторінки, необхідні HTML і CSS. HTML (мова гіпертекстової розмітки) є стандартизованою мовою розмітки документів, яка вказує браузеру, що відображати на веб-сторінці. [1] X Джерело інформації CSS (каскадні таблиці стилів) - це мова опису зовнішнього вигляду документа, яка використовується для зміни зовнішнього вигляду та макету веб-сторінки. [2] X Джерело інформації Вам знадобиться зображення, яке ви встановите як тло веб-сторінки.

Як створити папку та файл

• Ім'я папки може бути будь-яким, але краще, якщо воно складатиметься з одного короткого слова.

• Якщо ви не дуже дбаєте про те, як ваш сайт буде відкриватися на старих пристроях або на пристроях з повільним з'єднанням, використовуйте зображення з більш високою роздільною здатністю. Як фон також підійде зображення з простим візерунком, що повторюються, тому що на ньому буде добре видно текст.
• Якщо у вас немає зображення, безкоштовно скачайте його в інтернеті та скопіюйте у створену папку.

• Можна використовувати будь-який текстовий редактор, наприклад Блокнот у Windows або TextEdit у Mac OS X.
• Якщо ви бажаєте використовувати текстовий редактор, призначений для роботи з HTML, завантажте редактор Atom, який підтримує Windows, macOS та Linux.
• Якщо ви використовуєте TextEdit, перед тим, як почати писати HTML-код, відкрийте меню Формат і виберіть Конвертувати в простий текст. У цьому випадку HTML-файл буде правильно завантажуватись у веб-браузері.
• Потужні текстові редактори, такі як Microsoft Word, не дуже добре підходять для написання HTML-коду, тому що вони додають невидимі символи та форматування, які можуть перешкоджати правильному відображенню вмісту HTML-файлу у веб-браузері.

Як називається заднє тло сайту

У цьому модулі ви дізнаєтесь, як можна стилізувати фон блоків за допомогою CSS.

За кожним блоком CSS ховається спеціалізований шар, званий фоновим. CSS надає безліч можливостей для внесення до нього значних змін, у тому числі можливість використання декількох фонових шарів.

Фонові шари знаходяться далі від користувача і відображаються за вмістом блоку, починаючи з його області padding-box . Це дозволяє фоновому шару взагалі перекривати кордону.

Колір фону¶

Одним із найпростіших ефектів, який можна застосувати до фонового шару, є встановлення color. Початкове значення background-color - transparent, що дозволяє бачити вміст батьківського шару. Правильний колір, встановлений на фоновому шарі, знаходиться за іншими елементами, намальованими на цьому шарі.

Фонові зображення¶

Поверх шару background-color можна додати фонове зображення за допомогою властивості background-image . Властивість background-image приймає такі значення:

• URL-адреса зображення або data URI за допомогою CSS-функції url .
• Зображення, що динамічно створене градієнтною CSS-функцією.

Встановіть фонове зображення за допомогою CSS-функції url ¶

Градієнтні фони CSS¶

Існує кілька CSS-функцій градієнт, що дозволяють генерувати фонове зображення під час передачі двох або більше кольорів.

Незалежно від того, яка функція градієнта використовується, результуюче зображення має власний розмір, що відповідає обсягу доступного простору.

Демонстрація прикладу застосування фонового зображення за допомогою градієнтних функцій:

Фонові зображення, що повторюються¶

За замовчуванням фонові зображення повторюються по горизонталі та вертикалі, заповнюючи весь простір фонового шару.

Змінити це можна за допомогою властивості background-repeat з одним із наступних значень:

• repeat : Зображення повторюється в межах доступного простору, обрізаючись за необхідності.
• round : Зображення повторюється по горизонталі та вертикалі, щоб вмістити якнайбільше екземплярів у доступний простір, не обрізаючи, не стискаючи та не розтягуючи його.
• space : Зображення повторюється по горизонталі та вертикалі, щоб вмістити максимальну кількість екземплярів у доступний простір без обрізки, при необхідності розставляючи екземпляри зображення. Зображення, що повторюються, стосуються країв простору, займаного фоновим шаром, а між ними рівномірно розподіляється білий простір.

Властивість background-repeat дозволяє задавати поведінку для осей x та y незалежно один від одного. Перший параметр задає поведінку повтору по горизонталі, а другий по вертикалі.

Якщо використовується одне значення, воно буде застосовуватися і до горизонтального, і до вертикального повтору.

У стенограмі також є зручні однослівні опції, що дозволяють чіткіше висловити свої наміри.

Значення repeat-x повторює зображення лише горизонталлю, що еквівалентно repeat no-repeat .

Нижче наведений демонстраційний приклад демонструє ці можливості властивості background-repeat :

Положення фону¶

Ви можете помітити, що при стилізації деяких зображень у Web за допомогою оголошення background-repeat: no-repeat такі зображення відображаються ліворуч від свого контейнера.

Початкове положення фонових зображень – верхнє ліве. Властивість background-position дозволяє змінити цю поведінку шляхом усунення позиції зображення.

Як і властивість background-repeat, властивість background-position дозволяє позиціонувати зображення по осях x і y незалежно один від одного, причому за умовчанням використовується два значення.

Якщо використовуються довжини та відсотки CSS, то перший параметр відповідає горизонтальній осі, а другий вертикальній.

При використанні тільки ключових слів порядок дотримання ключових слів не має значення:

Порядок не має значення для ключових слів, пов'язаних із різними осями положення.

Коли значення CSS використовуються разом із ключовими словами, порядок має значення. Перше значення представляє горизонтальну вісь, а друге вертикальну.

Не можна одночасно використовувати ключові слова, пов'язані з тією самою віссю.

Властивість background-position має зручне скорочення до одного значення; опущене значення перетворюється на 50% . Наведемо приклад, що демонструє це з прикладу ключових слів, прийнятих властивістю background-position :

Крім стандартних двох та одного параметра, властивість background-position може приймати до чотирьох параметрів;

При використанні трьох або чотирьох параметрів довжина або відсоток CSS повинні передувати ключовим словам top , left , right або bottom , щоб браузер міг обчислити, якого краю блоку CSS має відбуватися зміщення.

У разі використання трьох параметрів довжина або значення CSS може бути другим або третім параметром, а два інших є ключовими словами; ключове слово, яке слідує за ним, буде використовуватися для визначення краю, зсув якого відповідає довжина або значення CSS. Усунення іншого зазначеного ключового слова встановлюється рівним 0 .

При використанні трьох і більше параметрів перед значенням довжини CSS повинні стояти ключові слова top, right, bottom або left.

При використанні трьох і більше параметрів перед значенням довжини CSS повинні стояти ключові слова top, right, bottom або left.

Якщо background-position: top left 20% застосовується до фонового зображення CSS, то зображення розміщується у верхній частині блоку, а значення 20% являє собою 20% зсув від лівої частини блоку (по осі x).

Якщо до фонового зображення CSS застосовується параметр background-position: top 20% left , то значення 20% являє собою 20% зсув від верхньої частини блоку CSS (по осі y), а зображення розміщується в лівій частині блоку.

При використанні чотирьох параметрів два ключових слова сполучаються з двома значеннями, що відповідають зміщенню щодо початку кожного із зазначених ключових слів. Якщо до фонового зображення застосовується background-position: bottom 20% right 30%, то фонове зображення позиціонується на 20% знизу та на 30% праворуч від блоку CSS.

Ця поведінка демонструється в наступному прикладі:

Наведемо ще кілька прикладів використання властивості background-position з використанням поєднання значень CSS та ключових слів:

Детальніше про нюанси, пов'язані з позиціонуванням фонів, можна дізнатися зі статті background-position на MDN.

Розмір фону¶

Властивість background-size визначає розмір фонових зображень; за замовчуванням розмір фонових зображень визначається виходячи з їхньої власної (реальної) ширини, висоти та співвідношення сторін.

Властивість background-size використовує значення довжини та відсотка CSS або спеціальні ключові слова. Властивість приймає до двох параметрів, що дозволяють незалежно змінювати ширину та висоту фону.

Властивість background-size приймає такі ключові слова:

• auto : При незалежному використанні розмір фонового зображення визначається його власною шириною та висотою; коли auto використовується разом з іншим CSS-значенням ширини (перший параметр) або висоти (другий параметр), розмір, встановлений в auto , змінюється при необхідності, щоб зберегти природне співвідношення сторін зображення. Це поведінка якості background-size за умовчанням.
• cover : Охоплює всю область шару фону. Це може означати, що зображення розтягується або обрізається.
• contain : Розмір зображення дозволяє заповнити простір без розтягування або обрізання. В результаті може залишитися порожній простір, що призведе до повторення зображення, якщо для параметра background-repeat не встановлено значення no-repeat.

Два останніх параметри призначені для самостійного використання без додаткових параметрів.

У наступному демонстраційному прикладі показані ці ключові слова у дії:

Демонстрація застосування цих ключових слів до background-size :

Фіксація фону¶

Властивість background-attachment дозволяє змінювати поведінку фіксованого положення фонових зображень (зображень, що входять до складу фонового шару) після того, як шар стає видимим на екрані.

Воно приймає 3 ключові слова: scroll , fixed і local .

Поводженням властивості background-attachment за замовчуванням є початкове значення scroll .

Використання значення fixed фіксує положення фонових зображень щодо області перегляду.

Після того, як простір, який спочатку займали зображення фонового шару, необхідно прокрутити (або вивести) за межі екрана, зображення у фоновому шарі залишаються зафіксованими у вихідному положенні, яке їм дозволяв займати фоновий шар, доки весь шар не буде прокручений за межі екрана в області перегляду.

Ключове слово local дозволяє фіксувати положення фонових зображень щодо вмісту елемента.

Фонова область¶

Властивість background-origin дозволяє змінювати область фону, пов'язану з конкретним блоком.

Спробувати ці можливості можна за допомогою наступної демонстрації:

Обрізання фону¶

Властивість background-clip управляє тим, що візуально видно з фонового шару, незалежно від меж, створених властивістю background-origin.

Як і в background-origin , можуть бути вказані такі області: border-box , padding-box і content-box , відповідні місцям, де може бути фоновий шар CSS.При використанні цих ключових слів будь-яке малювання фону далі вказаної області буде обрізано або вирізано.

Властивість background-clip також приймає ключове слово text, яке обрізає фон так, щоб він не виходив за межі тексту в блоці вмісту. Щоб цей ефект був помітний у тексті CSS, текст повинен бути частково або повністю прозорим.

Це відносно нова властивість і на момент написання статті Chrome і більшість браузерів вимагають префікс -webkit- для використання цієї властивості.

Слід також зазначити, що ця властивість несумісна з одночасним встановленням background-clip: text для блоку CSS.

Декілька фонових шарів¶

Як згадувалося на початку модуля, фоновий шар дозволяє визначити кілька підшарів. Для стислості я називатиму ці підшари фонами.

Декілька фонів задаються зверху вниз; перший фон знаходиться найближче до користувача, а останній - далі від нього.

Єдине певне тло або останній шар позначається браузером як фінальний фоновий шар. Тільки цьому шару дозволяється призначати background-color.

Враховуючи непередбачуваність Інтернету, фонове зображення може не завантажитись. Встановлення кольору фону на останньому шарі забезпечує хороший контраст для тексту тощо. д., якщо важливі шари фону не завантажаться.

Декілька шарів можуть бути налаштовані індивідуально за допомогою більшості CSS-властивостей, пов'язаних з фоном, які розділяються комами, як показано в наведеному нижче фрагменті коду та демонстраційному прикладі.

Короткий опис фону

Для полегшення стилізації фонового шару блоку, особливо якщо потрібно кілька фонових шарів, існує скорочення, яке виглядає так:

Важливо, що це властивості фону, опущені скорочення, встановлюються у свої початкові значення.

Порядок важливий за скороченої форми оголошення кількох фонів. Значення position і size мають бути зазначені обидва, розділені косою межею ( / ). Оголошення поведінки origin та clip у правильному порядку дозволяє скористатися перевагами встановлення ключових слів, які дійсні для обох одночасно

У наступному оголошенні фон обрізається та береться з блоку вмісту:

З урахуванням цієї скороченої семантики попередні оголошення, пов'язані з фоном, в даному фрагменті коду можуть бути переписані таким чином: