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

1. Чи можна обійтися засобами html при завданні фону?
2. Як задати фон через css?
3. Картинка в якості фону
4. позиція фону
5. скорочена запис
6. Управляємо розміром фонової картинки
7. Напівпрозорий фон за допомогою css
8. Як задати фон тексту?
9. Більше можливостей у створенні та управлінні фоном

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

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

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

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

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

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

Практичний курс по верстці адаптивного сайту з нуля!

Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3

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

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

body {

background - color: # D4E6B3;

}

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

<Link rel = "stylesheet" href = "style.css">

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

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

Картинка в якості фону

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

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

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

#bg {

width: 400px;

height: 250px;

background - image: url (html. png);

}

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

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

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

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

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

Repeat-x - повторюється тільки по ОІВ x;

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

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

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

background - repeat: repeat - x;

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

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

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

позиція фону

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

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

background - position: right top;

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

Практичний курс по верстці адаптивного сайту з нуля!

Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3

background - position: 50% 50%;

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

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

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

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

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

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

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

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

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

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

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

background - size: 80% 50%;

Знову ж таки, першим параметром задається розмір по горизонталі, другим - по вертикалі. Ми бачимо, що все правильно застосувати -фото стало розміром на 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);

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

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

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

<Div id = "bg">

<Span> Текст, ккоторомупріменімфон </ span>

</ Div>

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

#bg span {

background - color: white;

}

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

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

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

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

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

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

Практичний курс по верстці адаптивного сайту з нуля!

Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3