Як зробити фон HTML

1616

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

Як зробити фон HTML

Чи можна обійтися засобами html при завданні фону?

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

Відповідно, ми будемо використовувати каскадні таблиці стилів (css). Там набагато більше можливостей для завдання бекграунду. Ми сьогодні розберемо самі основні.

Як задати фон через css?

Отже, насамперед потрібно визначитися з тим, якого елемента потрібно задати фон. Тобто нам потрібно знайти селектор, до якого ми будемо писати правило. Наприклад, якщо фон потрібно задати всій сторінці в цілому, то можна зробити це через селектор body, всім блокам – через селектор div. Ну і т. д. Фон можна і потрібно прив’язувати до будь-яким іншим селекторам: стильовим класів, ідентифікаторів і т. д.

Після того, як ви визначилися з селектором, потрібно написати сама назва властивості. Для визначення фонового кольору (саме суцільного кольору, не градієнта і не картинки) використовується властивість background-color. Після нього потрібно поставити двокрапку і написати сам колір. Це можна зробити по-різному. Наприклад, з допомогою ключових слів, hex-коду, форматів rgb, rgba, hsl. Будь-який спосіб підійде.

Найчастіше використовується спосіб шістнадцяткового коду. Для підбору кольорів можна використовувати програму, в якій видно код кольору. Наприклад, photoshop, paint або який-небудь онлайн-інструмент. Відповідно, для прикладу пропишу загальний фон для всієї веб-сторінки.

body{
background-color: #D4E6B3;
}

Я раджу вам зараз створити на робочому столі html і css файли, підключити css html і повторювати за мною. Так ви зрозумієте все набагато краще, ніж якщо просто читати. Для роботи з файлами раджу використовувати програму Notepad++. Назвіть перший файл, наприклад index.html, а другий — style.css. Підключити css html можна так:

Цей код потрібно вставити в секцію head. Важливо, щоб файли знаходилися в одній папці.

Добре, а ми йдемо далі. Щоб показати вам інші можливості завдання фону, мені доведеться створити невеликий блок, в якому ми і будемо експериментувати з фоновим зображенням. Так-так, саме з зображенням.

Зображення в якості фону

В якості картинки я буду використовувати маленький значок мови html:

Як зробити фон HTML

Створимо порожній блок з ідентифікатором:

Задамо йому явні розміри і фон:

#bg{
width: 400px;
height: 250px;
background-image: url(html.png);
}

З цього коду ви можете бачити, що я використовував нову властивість – background-image. Воно призначене саме для вставки картинки в якості фону html-елемента. Подивимося, що вийшло:

Як зробити фон HTML

Щоб вибрати картинку, ви повинні після двокрапки написати ключове слово url, а потім в круглих дужках вказати шлях до файлу. В даному випадку шлях вказаний виходячи з того, що зображення лежить в тій же папці, що і html-документ. Також потрібно вказати формат зображення.

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

Але чи помітили ви одну особливість? Браузер взяв і розмножив картинку по всьому блоку. Так от, щоб ви знали, це поведінка фонових картинок за замовчуванням – вони повторюються по вертикалі і горизонталі до тих пора, поки можуть влізь в блок. За цією поведінкою ви можете легко керувати. Для цього використовують властивість background-repeat, у якого є 4 основних значення:

Repeat – значення за замовчуванням, зображення повторюється по обидва боки;

Repeat-x – повторюється тільки за оів x;

Repeat-y – повторюється тільки по осі y;

No-repeat – не повторюється взагалі;

Кожне значення ви можете прописати і подивитися, що ж трапиться. Я пропишу так:

background-repeat: repeat-x;

Як зробити фон HTML

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

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

За допомогою повторення верстальники раніше досягали того, що створювали фонові текстури і градієнти, використовуючи одне маленьке зображення. Воно могло бути 30 на 10 пікселів або ще менше. А може і трохи більше. Зображення було таким, що при його повторенні по одній або навіть по обидва боки, не було видно переходів, так що в результаті виходив єдиний цілісний фон. До речі, такий підхід варто використовувати і зараз, якщо ви хочете використовувати безшовну текстуру на своєму сайті в якості фону. Градієнт ж сьогодні вже можна реалізувати методами css3, про це ми ще обов’язково поговоримо.

Позиція фону

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

Ставити його можна по-різному. Один з варіантів, це просто вказати боку в яких повинна знаходитися картинка:

background-position: top right;

Як зробити фон HTML

Тобто по вертикалі все так і залишилося: фонова картинка розташовується зверху, але по горизонталі ми змінили сторону на right, тобто праву. Ще один спосіб задати позицію – у відсотках. Відлік при цьому починається з верхнього лівого кута. 100% — весь блок. Таким чином, щоб помістити картинку рівно по центру, запишемо так:

background-position: 50% 50%;

Як зробити фон HTML

Запам’ятайте одну важливу річ, пов’язану з позиціонуванням – першим параметром завжди вказується позиція по горизонталі, а другим – по вертикалі. Отже, якщо ви бачите значення 80% 20%, то можна відразу сказати, що фонове зображення буде сильно зрушено вправо, але вниз при цьому сильно не піде.

Ну і нарешті, прописувати позицію можна в пікселях. Все те ж саме, тільки замість % буде px. У деяких випадках може знадобитися й таке позиціонування.

Скорочений запис

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

background: #333 url(bg.jpg) no-repeat 50% 50%;

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

Далі ми розглянемо іншу властивість – розмір фону. Його вже не поставиш скорочено в якості параметрів скороченого запису.

Управляємо розміром фонової картинки

Наше поточне зображення не дуже добре підходить для демонстрації такого трюку, тому я візьму інше. За розмірами вона хай буде як блок або більше його. Так от, уявіть, що перед вами стоїть завдання: зробити фонову картинку так, щоб вона заповнювала свій блок не повністю. А картинка, припустимо, навіть більше розмірів блоку.

Як можна вчинити в такому випадку? Звичайно, найпростішим і розумним варіантом буде просто зменшення картинки, але не завжди є можливість це зробити. Припустимо, вона лежить на сервері і в даний момент немає часу і можливості її зменшити. Проблему можна вирішити за допомогою властивості background-size, який можна назвати відносно новим і яке дозволяє маніпулювати розміром фонового зображення, та й взагалі будь-якого фону.

Отже, моя картинка зараз займає весь простір в блоці, але я задам їй розмір фону:

background-size: 80% 50%;

Як зробити фон HTML

Знову ж таки, першим параметром задається розмір по горизонталі, другим – по вертикалі. Ми бачимо, що все правильно применилось –фото стало розміром на 80% ширини блоку в ширину і наполовину у висоту. Тут тільки треба внести одне уточнення – задаючи розмір у відсотках ви можете вплинути на пропорції картинки. Так що будьте уважні, якщо хочете не порушити пропорції.

Як ви можете здогадатися, також розмір фону можна вказувати в пікселях. Ще є два ключових слова-значення, які також можна використовувати:

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

Contain – отмасштабирует так, щоб картинка повністю влазила в блок в максимальному своєму розмірі.

Переваги цих значень в тому, що вони не змінюють пропорції картинки, залишаючи їх колишніми.

Також ви повинні розуміти, що розтягування зображення може привести до погіршення її якості. Можу навести приклад з життя і реальної практики верстальників. Всі знають і розуміють, що при верстці під десктопи потрібно адаптувати сайт під основні ширини моніторів: 1280, 1366, 1920. Якщо ви візьмете фонову картинку розміром, припустимо, 1280 на 200, і не дасте їй background-size, то екранах з шириною більше з’явиться порожнє місце, картинка не буде заповнювати ширину повністю.

У 99% випадків це не влаштовує веб-розробника, тому він задає background-size: cover, щоб картинка завжди тягнулася на максимум по ширині вікна. Це хороший прийом, який потрібно використовувати, але тепер ви зіткнетеся з проблемою, що користувачі з шириною екрану 1920 пікселів можуть побачити картинку неоптимального якості.

Я нагадаю, вона розтягнеться на максимум по ширині. Відповідно, якість автоматично погіршиться. Єдино правильним рішенням тут буде використовувати картинку більшого розміру – 1920 пікселів в ширину. Тоді на широких екранах вона буде в своєму натуральному розмірі, а на інших просто потихеньку обрізатися, але при цьому, при грамотному підборі фонової картинки, на зовнішній вигляд сайту це не вплине.

Загалом, це всього лише 1 приклад того, як використовувати знання, отримані вами в цій статті, при верстці реальних макетів.

Напівпрозорий фон за допомогою css

Ще одна фішка, яку можна реалізувати з допомогою css – напівпрозорий фон. Тобто через цей фон можна буде розгледіти, що знаходиться за ним.

Для прикладу я поставлю всій сторінці в якості фону картинку, яку ми використовували раніше в прикладах. Блоку ж з ідентифікатором bg, на якому ми проводимо всі наші експерименти, задамо фон з допомогою формату завдання кольору rgba.

Як я вже і казав раніше, в css є багато форматів для завдання кольору. Один з них – rgb, досить відомий формат тим, хто працює в графічних редакторах. Він записується так:rgb(17, 255, 34);

Першим значенням, у дужках йде насиченість червоного, потім зеленого, потім синього. Значення може бути числом від 0 до 255. Відповідно, rgba формат нічим не відрізняється, тільки додається ще один параметр – альфа-канал. Значення може бути від 0 до 1, де 0 – повна прозорість.

Відповідно, для визначення середньої напівпрозорості потрібно записати приблизно так:

background: rgba(15, 17, 156, 0.5);

Задамо такою фоновий колір блоку, ось що вийде:

Як зробити фон HTML

Як задати фон тексту?

До цих пір ми з вами розглядали завдання фону для блокових елементів. Але що, якщо вам потрібно задати фон саме тексту? Рішення тут дуже просте: фон потрібно прописати рядковий елементу, в якому написаний текст. Значить, в першу чергу потрібно створити цей рядковий елемент. За замовчуванням для цих цілей раджу використовувати span.

Текст, до якого застосовується фон

Це потрібно нам з вами лише для того, щоб мати можливість в css звернутися до нашого спану, щоб ми зараз благополучно і зробимо:

#bg span{
background-color: white;
}

Перевіряємо:

Як зробити фон HTML

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

Більше можливостей у створенні та управлінні фоном

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

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

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