Background HTML: що це таке

Background HTML: що це таке

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

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

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


Існує п 'ять основних атрибутів, які використовуються в 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. Якщо воно не повторюється, решта, не закрита зображенням простору, матиме колір, визначений у цій властивості.

Розташування тла

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


Наприклад:

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

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

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

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

  • left;
  • center;

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

  • top;
  • center;

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

Повторення тла

За замовчуванням при встановленні зображення як фонового, воно повторюється як по горизонталі, так і по вертикалі, поки не буде заповнено все вікно переглядача або елемент. Але іноді потрібно, щоб зображення показувалося тільки один раз або розташовувалося тільки в одному напрямку. Для цього в 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, потрібно задуматися про те, як користувач буде взаємодіяти з вікном перегляду. Вікно перегляду - це розділ вашого переглядача, який відображає веб-сторінку. При прокрутці сайту вниз, воно не переміщується. Замість цього вміст сторінки прокручується вгору, але створюється враження, що у вікні переглядача сторінка прокручується вниз.


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

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

Замість того, щоб щоразу писати окремо всі ці правила, їх можна об 'єднати в одне і записати в наступному вигляді: background: <color> <image> <position> <attachment> <repeat>. І не потрібно вказувати кожне значення окремо. Якщо властивість не використовується, замість неї буде спрацьовувати типове значення. Важливо зазначити, що фонове зображення з 'являється тільки в тих областях, де присутній батьківський елемент. Навіть коли воно розташоване відносно вікна браузера, то не буде відображатися, якщо його батьківський елемент не видно. У 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 - позиція розраховується на основі вмісту елемента.

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

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

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

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

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

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

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

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

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