Від автора:всіх вітаю. Фонові кольори та зображення у веб-дизайні мають величезну роль, оскільки дозволяють привабливіше оформити будь-які елементи. Як зробити фон у 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, то була б лише одна картинка.

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

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

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

Напівпрозоре тло за допомогою css

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

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

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

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

61.5K

Будь-яка кімната виглядатиме набагато краще, якщо її підлогу вистилає дорогий перський килим. То чим гірше ваш сайт? Може, настав час і його підлогу «застелити» дорогим витонченим паласом ручної роботи. Розберемося докладніше, як зробити тло для сайту:

Фон для сайту

Буває так, що старий дизайн сайту вже набрид. І хочеться чогось новенького і смачненького. А новий дизайн буде таким, якщо його приготувати власноруч.

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

Існує кілька способів зміни фону на сайті. Для цього використовуються можливості CSS або html. Але багато властивостей для роботи з фоном мають однакову назву та методику застосування в цих веб-технологіях.

Основи роботи з фоном у html

Як фон можна використовувати кілька елементів:

• Колір;
• Фонову картинку;
• Текстури зображення.

Розберемося із застосуванням кожного з них докладніше.

Для того щоб встановити колір заднього фону для сайту, використовується властивість background-color стильового атрибуту style . Тобто, щоб встановити основний колір для веб-сторінки, потрібно прописати його всередині тега . Наприклад:

Фон сайту #55D52B

Крім шістнадцяткового коду кольору підтримується значення у форматі ключового слова або RGB. Приклади:

Фон сайту rgb(23,113,44)

Фон сайту green

Встановлення кольору фону за допомогою ключових слів має низку обмежень порівняно з рештою двох способів.

У HTML підтримується всього 16 ключових слів для завдання кольору. Ось кілька із них: white, red, blue, black, yellowта інші.

Тому для того, щоб встановити фон для сайту html, краще використовувати шістнадцятковий формат або RGB.

Крім вибору кольору, доступні й інші параметри налаштування. Якщо властивості background-color встановити значення transparent , то фон сторінки стане прозорим. Це значення даної властивості присвоєно за умовчанням.

Тепер розглянемо можливості мови гіпертексту для встановлення фонового малюнка для сайту. Це можна зробити за допомогою якості background-image.

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

Припустимо, що ми розробляємо сайт про поезію, і як підкладка потрібно використовувати зображення Пегаса. Крилатий кінь уособлюватиме свободу творчої думки поета!

Нам потрібно, щоб зображення відображалося один раз посередині екрана. Але, на жаль, браузер не розуміє наших високих бажань. І виводить меншу за розмірами картинку для фону сайту стільки разів, скільки може вмістити в себе площу екрану:

Напевно, чотирьох усміхнених коней із крилами поетам буде надто багато для натхнення. Тому забороняємо клонування нашого Пегаса. Робимо це за допомогою властивості background-repeat. Можливі значення:

• repeat-x - Повторення фонового зображення по горизонталі;
• repeat-y – по вертикалі;
• repeat - по обох осях;
• no-repeat – повторення заборонено.

Серед наведених варіантів нас цікавить останній. Перед тим, як змінити тло сайту, використовуємо його у своєму коді:

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

• Ключовим словом ( top , bottom , center, left, right);
• Відсотками – відлік починається від верхнього лівого кута;
• В одиницях виміру (пікселях).

Скористаємося найпростішим варіантом центрування:

Буває, що потрібно зафіксувати положення малюнка під час прокручування. Тому перш, як зробити картинку тлом сайту, скористайтеся спеціальною властивістю background-attachment. Значення, що приймаються ним:

• scroll;


• fixed.

Нам потрібне останнє значення. Тепер код нашого прикладу виглядатиме ось так:

Текстурний фон сайту

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

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

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

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

Як налаштувати шрифт

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

Як налаштувати колір фону

Відкрийте сторінку в HTML вашого блогу чи сайту. При редагуванні сторінки ви можете відкрити її в Dreamweaver, щоб полегшити свою роботу. Якщо ваш сайт створений за допомогою конструктора, деякі сервіси дозволяють змінювати налаштування HTML онлайн, зайшовши на сторінку «Дизайн» та вибравши вкладку «Редагувати HTML». У будь-якому випадку ви повинні мати можливість отримати доступ до HTML-кодів для вашого блогу або сайту. Процес налаштування може сильно змінюватись в залежності від того, які послуги вам доступні і який двигун ви використовуєте.

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

Ви можете без проблем знайти діаграму кольорів HTML у спеціалізованих виданнях. Кожен колір відображається у розмітці у вигляді шестизначного коду. Наприклад, біле тло позначається як #FFFFFF.

Таким чином, знайдіть код кольору, який ви хочете бачити на своєму сайті як визначальний фон кольору. У розмітці це виглядатиме так:

background-color:#XXXXXX; (

Після того, як ви збережете колір фону в HTML, ви побачите, що зовнішній вигляд вашої сторінки змінено.

Додавання фонового зображення

Виберіть зображення, яке потрібно додати як фон. Існує багато сайтів, які дозволяють завантажити такі фони. Крім того, ви можете використовувати зображення, яке вже збережено на комп'ютері.

Залийте зображення до Інтернету. Багато хто дозволяє завантажувати зображення безкоштовно. Отримайте URL-адресу на вашу фонову картинку. Для цього вам потрібно відкрити зображення у своєму браузері та скопіювати URL-адресу.

Вставте код, щоб додати зображення як фон. У HTML він виглядає так:

background-image: url(image URL);

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

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

Ми з вами у попередніх розділах склали основний шаблон HTML-документів, визначилися що таке ХТМЛ-теги, навчилися зберігати та редагувати html-файли, а в цьому розділі ми познайомимося з атрибутами тегівта змінимо колір тексту та фону сторінки.

Відкриємо наш index.htmlдля редагування: У мене вийшло!!!

І трохи його змінимо, додамо атрибути: text="#000000" bgcolor="#ffffff"> У мене вийшло!

Атрибут- це параметр тега, який вставляється в тег "парою" (ім'я параметра + значення параметра).
Значення атрибутів тега вставляються:
1) text=#000000 без лапок;
2) text="#000000" в одинарних лапках;
3) text="#000000" у подвійних лапках.
Будь-який з цих варіантів правильний, але якщо піклуватися про етику коду, то краще використовувати подвійні лапки, як у прикладі вище.

Атрибут "text"керує кольором тексту на всій сторінці, а "bgcolor"керує кольором фону сторінки.

Тепер пропоную поговорити про квіти ХТМЛ-документів. Колір визначається:
1) text="gold"- словами англійською, припустимо: gold(золотий), red(червоний), green(зелений) і так далі...
Але колір може складатися тільки з одного слова, наприклад "red", але якщо написати "green-red", то браузер це не зрозуміє і просто проігнорує.
2) text="#000000"- колірна схема RBG (червоний зелений синій). "#" цей символ говорить про те, що це номер кольору, перші два символи (у моєму прикладі нулі) кажуть скільки ми взяли "червоного" кольору, другі зеленого і останні два синього кольору.
Кожен колір задається від 00 до FF (0-1-2-3-4-5-6-7-8-9-A-B-C-D-E-F), наприклад #000000-чорний, #ffffff-білий, #ff0000-червоний, #00ff00- зелений #0000ff-синій

Як бонус від сайту пропоную вам завантажити палітру кольорів (2кБ), яка зображена на картинці вище. Вам потрібно розпакувати архів запустити файл color.html, Далі на великому полі ставите вазатель мишки на потрібний вам колір, який буде показаний в маленькому віконці і якщо в цей час клацнути мишкою то код кольору з'явиться в маленькому вікні праворуч.

А тепер повернемося до нашого файлу index.htmlі збережемо його як tsvet.html, тепер подивимося, що вийшло. Яким був, таким і лишився? І ви абсолютно праві, тому що білий для фону, а чорний для тексту кольору за замовчуванням. Щоб помітити різницю змінимо значення атрибутів:

text=gold" bgcolor="#0900b8"> У мене вийшло!

Збережемо і поможемо (відкриється в новій вкладці)

Є й інші способи задавати текст у хтмл-файлах, але ці два вважаються основними.

У наступному розділі ми навчимося керувати текстом BR, переносити текст на інший рядок.

Урок 7. Колір тексту та фону в HTML.

Дата: 2008-12-05

Як встановити колір фону та тексту на веб-сторінці?

За замовчуванням колір тексту та взагалі будь-якого шрифту на web-сторінках завжди чорний (#000000 ). Але ми завжди можемо задати абсолютно будь-який колір, який нам подобається і пристойно виглядає або більше підходить під дизайн конкретного сайту.

Задаємо колір тексту

У HTML колір тексту, шрифту, фону та інших елементів можна задати двома способами:

1. Спосіб 1-й.У парних тегах прописується атрибут із зазначенням назви потрібного кольору. Назва кольору вказується англійською мовою. Наприклад, колір заголовка на нашій web-сторінці можна встановити таким чином:

Коментарі до цієї статті (уроку):

Андрію! Який у вас чудовий сайт! Я вже другий тиждень регулярно ним користуюся: вивчаю Ваші уроки та відеоуроки; читаю Вашу літературу та завантажую програми; роблю перші кроки у веб-програмуванні! І, що найголовніше, у мене виходить! А я ж зовсім не фізик, а лірик! І в цьому може переконатися кожен, хто відвідає мій літературний сайт: "Вірші Олег ГУЗЬ" Мої реквізити: електронна пошта: STIH [email protected]сайт: http://sites.google.com/site/stihiolegguz/

уважно перевірте код

Я пробував змінювати колір тла, і мені не виходить! Як змінити колір тла?