Фоновий малюнок html. Фон, який завжди розтягується на всю сторінку

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

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

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

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

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

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

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

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

body (background-color: # D4E6B3;)

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

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

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

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

< div id = "bg" > < / div >

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

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

#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;

background - repeat: repeat - x;

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

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

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

позиція фону

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

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

background-position: right top;

background - position: right top;

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

background-position: 50% 50%;

background - position: 50% 50%;

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

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

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

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

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

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

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

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

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

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

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

background-size: 80% 50%;

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 - повна прозорість.

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

Основні теги HTML для створення фону

Отже, переходимо до питання, фоном в html на весь екран. Для того щоб сайт красиво виглядав, необхідно розуміти одну досить важливу деталь: досить просто зробити градієнтний фон або зафарбувати його однотонним кольором, але якщо вам необхідно вставити на задній план картинку, вона не буде розтягуватися на всю ширину монітора. Зображення спочатку потрібно підібрати або самостійно зробити дизайн з таким розширенням, в якому у вас буде відображатися сторінка сайту. Тільки після того як фонове зображення готове, переносимо його в папку з назвою «Images». У ній ми будемо зберігати всі використовувані картинки, анімації та інші графічні файли. Ця папка повинна знаходитися в кореневому каталозі з усіма вашими файлами html. Тепер можна переходити і до коду. Існує кілька варіантів запису коду, за допомогою якого фон буде змінюватися на картинку.

1. Написати атрибутом тега.
2. Через CSS стиль в HTML коді.
3. Написати CSS стиль в окремому файлі.

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

1. Перший спосіб запису через атрибут тега (body) в файлі index.htm. Він записується в такому вигляді: (body background = "Названіе_папкі / Названіе_картінкі.расшіреніе") (/ body). Тобто якщо у нас картинка з назвою «Picture» і розширенням JPG, а папку ми назвали як «Images», тоді запис HTML-коду буде виглядати так: (body background = "Images / Picture.jpg") ... (/ body) .
2. Другий метод запису зачіпає CSS стиль, але записується в тому ж файлі з назвою index.htm. (Body style = "background: url (" ../ Images / Picture.jpg ")").
3. І третій спосіб запису провадиться в двох файлах. У документі з назвою index.htm в записується такий рядок: (head) (link rel = "stylesheet" type = "text / css" href = "Путь_к CSS_файлу") (/ head). А в файлі стилів з назвою style.css вже записуємо: body (background: url (Images / Picture.jpg ")).

Як в HTML зробити фон картинкою, ми розібрали. Тепер необхідно зрозуміти, як розтягнути картинку по ширині всього екрану.

Способи розтягування фонової картинки на ширину вікна

Уявімо наш екран в процентному вигляді. Виходить, що вся ширина і довжина екрана становитиме 100% х 100%. Нам необхідно розтягнути картинку на цю ширину. Додамо до запису зображення в файл style.css рядок, яка і буде розтягувати зображення на всю ширину і довжину монітора. Як це записується в CSS стилі? Все просто!

background: url (Images / Picture.jpg ")

background-size: 100%; / * Такий запис підійде для більшості сучасних браузерів * /

Ось ми і розібрали, як зробити картинку фоном в html на весь екран. Є ще спосіб записи в файлі index.htm. Хоч цей метод і застарілий, але для новачків необхідно його знати і розуміти. У тезі (head) (style) div (background-size: cover;) (/ style) (/ head) цей запис означає, що ми виділяємо спеціальний блок для фону, який буде позиціонуватися по всій ширині вікна. Ми розглянули 2 способи, як зробити фон сайту картинкою html, Щоб зображення розтягувалося на всю ширину екрану в будь-якому з сучасних браузерів.

Як зробити фіксований фон

Якщо ви вирішили використовувати картинку в якості фону майбутнього веб-ресурсу, тоді вам просто необхідно дізнатися, як його зробити нерухомим, щоб він не розтягувався в довжину і не псував естетичний вигляд. Досить просто за допомогою прописати це невелике доповнення. Вам необхідно в файлі style.css дописати одну фразу після background: url (Images / Picture.jpg ") fixed; або замість неї додати після крапки з комою окремий рядок - position: fixed. Таким чином, ваш фоновий малюнокстане нерухомим. Під час прокрутки контенту на сайті, ви побачите, що текстові рядки рухаються, а фон залишається на місці. Ось ви і навчилися, як в html зробити фон картинкою, декількома способами.

Робота з таблицею в HTML

Багато недосвідчених веб-розробники, стикаючись з таблицями і блоками, часто не розуміють, як в html зробити картинку фоном таблиці. Як і всі і CSS стилю, ця мова веб програмування досить простий. І рішенням такого завдання буде написання пари рядків коду. Ви вже повинні знати, що саме писання табличних рядківі стовпців позначається відповідно як теги (tr) і (td). Щоб фон таблиці зробити у вигляді зображення, необхідно дописати до тегу (table), (tr) або (td) просту фразу за умови посилання на картинку: background = URL картинки. Для наочності наведемо кілька прикладів.

Таблиці з картинкою замість фону: HTML приклади

Намалюємо таблицю 2х3 і зробимо її фоном картинку, збережену в папці "Images": (table background = "Images / Picture.jpg") (tr) (td) 1 (/ td) (td) 2 (/ td) (td) 3) (/ td) (/ tr) (tr) (td) 4 (/ td) (td) 5 (/ td) (td) 6 (/ td) (/ tr) (/ table). Так наша таблиця буде зафарбована в фон картинки.

Тепер намалюємо цю ж табличку розмірами 2х3, але вставимо картинку в стовпчики під номером 1, 4, 5 і 6. (table) (tr) (td background = "Images / Picture.jpg") 1 (/ td) (td) 2 (/ td) (td) 3 (/ td) (/ tr) (tr) (td background = "Images / Picture.jpg") 4 (/ td) (td background = "Images / Picture.jpg") 5 ( / td) (td background = "Images / Picture.jpg") 6 (/ td) (/ tr) (/ table). Після перегляду бачимо, що фон з'являється тільки в тих осередках, в яких ми прописали, а не у всій таблиці.

кросбраузерність сайту

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

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

Як розтягнути фон на всю ширину вікна?

Як збільшувати або зменшувати фону призначена властивість background-size, як його значення вказується 100%, тоді фон буде займати всю ширину вікна браузера. Для старих версій браузерів слід використовувати специфічні властивості з префіксами, як показано в прикладі 1.

Як додати фоновий малюнок на веб-сторінку?

Щоб додати фонову картинку на веб-сторінку, задайте шлях до зображення всередині значення url стильової властивості background, яке в свою чергу додається до селектора body.

Чи можна зробити анімований фон?

Мультиплікація це досить сильний прийом, здатний оживити будь-який документ, тому не дивно, що величезну популярність придбала технологія Flash, яка додає на веб-сторінки мультики, до того ж інтерактивні. Графічний формат GIF також підтримує найпростішу анімацію шляхом послідовної зміни кадрів. Так що використовуючи зображення в цьому форматі допустимо анімувати не тільки окремі картинки, але також фон веб-сторінки або певного елемента.

Спочатку потрібно створити анімовану картинку у форматі GIF, для чого можна скористатися програмою Adobe Photoshop або іншої підходящої для цієї мети. Також існують бібліотеки готових анімованих файлів, які можна застосовувати в якості фонової картинки. Далі зображення додається в якості фону за допомогою стильової властивості background, як показано в прикладі 1.

Як помістити фоновий малюнок у правий нижній кут сторінки?

Для управління положенням фонового малюнка на сторінці застосовується стильова властивість background-position, воно одночасно встановлює координати зображення по горизонталі і вертикалі. Щоб скасувати повторення фонової картинки використовується властивість background-position зі значенням no-repeat.

Як зробити, щоб фон не повторювався?

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

Як зробити, щоб фон повторювався тільки по вертикалі?

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

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

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

Розглянемо спочатку спосіб завдання фонового зображення на сайті за допомогою атрибута backgroundтега body:

Тут фонове зображення встановлюється за допомогою атрибута background тега body.

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

Примітка:Фонове зображення і колір фону рекомендується ставити не за допомогою HTML, а з допомогою CSS. В такому випадку код буде дійсним і більш правильним.

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

В CSS фоновий колір і фонове зображення можна задати одним властивістю background:

Тут фоновий малюнок встановлюється за допомогою властивості background CSS (фон картинка CSS).

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

Якщо ви хочете розтягнути фонове зображення на весь розмір вікна браузера, використовуйте властивість background-size: 100%;

У конструкторі сайтів "Нубекс" для будь-якого сайту можна використовувати велике зображенняв якості фону і закріпити його.

17.10.2015

Поки немає

Всім привіт!
Продовжуємо вивчати основи HTML.
У цьому уроці я розповім і на прикладах покажу, як зробити фонз кольору або картинки в HTML-сторінці.
Все досить просто!
Почнемо з кольору!
Я думаю, ви не пропустили, там, де я розповідав, як міняти колір тексту і в кінці статті давав коди різних кольорів і відтінків. Чому я нагадав вам про цей урок? Та тому, що там є таблиця з готовими кодамикольорів, беріть їх і практикуйте відразу в цьому уроці.
Отже, як зробити колірний фон в HTML ...

Колірний фон в HTML

Колір фону в HTML-документі за замовчуванням білий. Як же поставити колір за бажанням?
У цьому нам допоможе атрибут «bgcolor». Щоб зафарбувати задній фон, пропишіть цей атрибут до тегу «body»:

Або так:

Ось повний HTML-код:

Текст сторінки буде зелений, а фон чорним.

Результат буде ось таким:

Якщо ви хочете зробити фон з картинки, тоді до тегу «body» пропишіть атрибут «baсkground»:

Залийте будь-яку картинку туди, де лежить ваша веб-сторінка (на прикладі у мене сторінка має назву «fon» з розширенням «.gif»):

Ось повний HTML-код:

Результат буде ось таким:

Якщо фонова картинка розміщена в папці images або в якійсь іншій папці, це буде виглядати так:

Ось повний HTML-код:

Текст сторінки на красивому фоні.

На сьогодні це все! Я думаю, урок був нескладний і ви все зрозуміли. Якщо є питання, пишіть в коментарях.
Чекаю вас на наступних уроках.

Попередній запис
Наступний запис