Background HTML: що це таке

Фон є важливою частиною веб-сторінки. За замовчуванням він має білий колір. Але мова HTML надає кілька варіантів зміни його властивостей. В інтернеті більшість сайтів - з барвистим фоном, в тому числі з анімацією. На них присутня різна графіка або фонові зображення. Налаштування стилю фону для веб-сайтів здійснюється за допомогою атрибута - background в HTML. Існує кілька властивостей CSS, використовуваних для настройки фону елемента.

Атрибути для зміни параметрів фону

У коді, написаному на мові HTML, background встановлюється як для всієї сторінки, так і для окремих її елементів. Раніше для цього використовувався тег, але тепер подібна практика вважається застарілою. Атрибут застосовувався до специфікації 4.01 і так записувався в HTML:.Зараз найпростіший спосіб для зміни значення за замовчуванням - це задати властивості атрибуту background-color для тега.

html style background

Існує п’ять основних атрибутів, які використовуються в HTML і CSS для зміни фону:

  • -color - вказує, який колір буде використовуватися для заливки;
  • -image - встановлює зображення для фону;
  • -position - вказує, куди помістити фонове зображення;
  • -repeat - визначає, чи є зображення повторюється;
  • -attachment - визначає, чи буде зображення прокручуватися разом зі сторінкою;
  • -size - задає фону певний розмір;
  • -origin - визначає область для позиціонування фонового зображення;
  • -clip - визначає, як фонове зображення або фоновий колір відображається під межами елемента.

Перші п’ять властивостей можуть бути об’єднані в один короткий атрибут - background. Атрибут працює в браузерах Firefox, Safari, Opera, IE8.Тільки в застарілих IE7 і IE6 фон не включає в себе кордону.

Як змінити колір фону в HTML

Атрибут “колір фону” (background-color в HTML і CSS) заповнює сторінки суцільним кольором. Існує кілька способів поставити колір, використовуючи різні формати:

  • -color: red;
  • -color: rgb (0, 0, 255);
  • -color: # 2500ff.

Для фону може бути встановлено властивість transparent, що відповідає за ступінь прозорості і дозволяє зробити будь-які елементи під ним видимими.

Як встановити фонову картинку

Background-image - це властивість, що дозволяє вказати зображення, яке буде відображатися замість фону. Воно задається за допомогою коду CSS і мови HTML: background-image: url (image. jpg). Код дуже простий, але для того щоб він працював, картинка повинна знаходитися в тій же папці, що і файли зі стилями. Якщо це не так, в дужках потрібно вказати правильну адресу, наприклад: background-image: url (images / image. jpg). Фонове зображення може бути використано в поєднанні з background-color. Якщо воно не повторюється, то інше, що не закрите картинкою простір, буде мати колір, заданий в цій властивості.

html background font

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

Атрибут CSS і HTML background-position управляє розташуванням фонового зображення і визначає, де саме воно знаходиться в елементі. З його допомогою можна вказати, де буде знаходитися верхній лівий кут зображення щодо верхнього лівого кута елементу. Спочатку у властивості записується положення по горизонтальній осі координат, а потім - по вертикальній. Для цього зручніше використовувати пікселі.

Наприклад:

  • -position: 0 0 - використовується за умовчанням і вказує на розташування фону в верхньому лівому кутку елемента;
  • -position: 100px 0 - зрушить зображення вправо;
  • -position: -100px 0 - зрушить вліво;
  • -position: 0 100px - опустить зображення вниз.

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

html background size

Як використовувати ключові слова для розташування фону

Ключові слова можна використовувати для завдання координат по горизонтальній і вертикальної осі, при цьому неважливо, в якій послідовності вони записуються. Варіанти ключових слів для горизонтальній осі:

  • Left;
  • Center;
  • Right.

Для вертикальної осі:

  • Top;
  • Center;
  • Bottom.

При роботі з іншими одиницями вимірювання спочатку задаються координати по горизонтальній осі, а потім по вертикальній. Наприклад, background-position: bottom right. Процентні значення використовуються аналогічним чином. При цьому точка відліку знаходиться у верхньому лівому кутку вікна браузера. Приклад використання відсотків: background-position: 100% 50%. Це означає, що зображення зміститься вправо і виявиться в центрі правої частини елемента. Той же ефект можна отримати, якщо використовувати властивість: right center. Якщо застосовувати значення background-position: 100% 100%, тоді фон виявиться в правому нижньому кутку елемента.

html background image

Повторення фону

За замовчуванням при установці зображення в якості фонового, воно повторюється як по горизонталі, так і по вертикалі, поки не буде заповнено всі вікно браузера або елемент. Але іноді потрібно, щоб зображення показувалося тільки один раз або розташовувалося тільки в одному напрямку. Для цього в CSS і HTML для background знадобляться наступні атрибути:

  • -repeat: repeat - за замовчуванням, зображення повторюється до повного заповнення елемента;
  • -repeat: no-repeat - зображення не повторюється і використовується на сторінці тільки один раз;
  • -repeat: repeat-x - повторення тільки по горизонтальній осі;
  • -repeat: repeat-y - повторення тільки по вертикальній осі;
  • -repeat: inherit - браузер використовує значення, присвоєне батьківського елементу.

Атрибут для смуги прокрутки

В HTML background-attachment визначає, що відбувається з картинкою, коли користувач прокручує сторінку. У цього атрибута є кілька властивостей: scroll, fixed і inherit. Inherit повідомляє, щоб background-attachment успадковує властивість свого батька. Для правильного використання background-attachment, потрібно задуматися про те, як користувач буде взаємодіяти з вікном перегляду. Вікно перегляду - це розділ вашого браузера, який відображає веб-сторінку. При прокручуванні сайту вниз, воно не переміщається. Замість цього вміст сторінки прокручується вгору, але створюється враження, що в вікні браузера сторінка прокручується вниз.

розмір background html

При установці властивості HTML background-attachment: scroll, браузеру повідомляється, що фон повинен прокручуватися разом з елементом. Фон “прилипає” до елементу і прокручується, поки не зникне. Це значення за замовчуванням для background-attachment. Але коли встановлюється властивість background-attachment: fixed, то фон повинен залишатися на своєму місці і не зрушуватися разом з контентом. При прокручуванні сторінки вниз, він завжди залишається видимим.

Як коротко записати властивості background

Замість того, щоб кожен раз писати окремо всі ці правила, їх можна об’єднати їх в одне і записати в наступному вигляді: background:. І не потрібно вказувати кожне значення окремо. Якщо властивість не використовується, замість нього буде спрацьовувати значення за замовчуванням. Важливо відзначити, що фонове зображення з’являється тільки в тих областях, де присутній батьківський елемент. Навіть коли воно розташоване щодо вікна браузера, то не буде доступний широкому, якщо його батьківський елемент не видно. В CSS3 можна використовувати більше одного зображення для фону елемента. Код буде таким же, як CSS2, тільки адреси окремих зображень потрібно відокремити комою. Перше з них буде розташовано у верхній частині елемента, а наступні просто нашаруються на нього.

Властивість background-size

Іноді для сайту потрібно задати фон певного розміру. Атрибут, який для цього використовується в HTML - background-size. У цієї властивості існує ряд можливих значень:

  • -size: contain - масштабує зображення таким чином, щоб воно відповідало елементу, зберігаючи при цьому піксельний співвідношення сторін;
  • -size: cover - розгортає зображення для заливки елемента, зберігаючи пропорції;
  • -size: 100px 100px - масштабує зображення до зазначених розмірів;
  • -size: 50% 100% - встановлює масштаб зображення до зазначених розмірів, відсотки відносяться до розміру містить елемента.

Розмір background в HTML для Firefox до версії 4.0 задається нестандартним властивістю - moz-background-size. Аналогічно для Opera до версії 10.53 буде потрібно прописати - o-background-size.

Властивість background-origin

Властивість background-origin використовується в поєднанні з background-position для позиціонування фонового зображення. Застосовується, якщо background-attachment задано як fixed. Його параметри можна відраховувати від кордонів, відступів або вмісту елемента.

  • -origin: border-box; background - позиція розраховується від кордону.
  • -origin: padding-box; background - позиція розраховується з поля заповнення.
  • -origin: content-box; background - позиція розраховується на основі вмісту елемента.

html background color

Варіанти використання фонового зображення

Крім очевидної декоративної користі фону, його можна використовувати і для інших цілей. Наприклад, якщо в CSS додати властивість float для зміщення елементів, складно гарантувати, що два або більше стовпчика виявляться однакової ширини. Якщо вони різні, то фон одного з стовпців буде закінчуватися раніше, ніж фон іншого. Уникнути подібного ефекту можна, якщо використовувати окремий фон для кожного з стовпців. Але набагато простіше застосувати одне фонове зображення до їх батьківського елементу. Ще одне можливе застосування - декорування невпорядкованих списків. Буліти в них можуть виглядати не дуже привабливо, тому їх краще приховати і замінити на фонове зображення.

Шрифти замість фону в HTML: background font

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

background html

Нове властивість - background-break

В CSS3 з’явилося нововведення: елементи можуть бути розділені на окремі блоки, рядки і сторінки. Властивість background-break визначає те, як фон відображається в різних вікнах.

Можливі значення:

  • -break: continuous - значення за замовчуванням. Обробляє блоки, як ніби між ними немає простору;
  • -break: bounding-box - враховує простір між блоками;
  • -break: each-box - обробляє кожен блок в елементі окремо і повторно малює фон індивідуально для кожного з них.

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



ЩЕ ПОЧИТАТИ