Всім привіт! На зв'язку з вами ваш покірний слуга з порцією корисного та практичного матеріалу на тему, як встановити фон для сайту. Це саме початок у html верстці і тут я наочно продемонструю на прикладі як можна зробити гарне тло для сайту, який однозначно зачепить інтернет користувача і додасть оригінальності.
Якщо ви звернули увагу, то більшість інтернет-бізнесменів використовують у своїх продаючих сторінках і сторінках підписки унікальне тло. Ось сьогодні ми розберемо технічну складову цього процесу.
Отже, для початку нам потрібна, звичайно, картинка. У зарубіжному інтернеті є один дуже гарний сайт, на якому ви можете скачати безкоштовно різні картинки для фону сайту. Їх там просто безліч. Сайт має назву Subtle Patterns.
Він відображається у списку пошуковика Google на першому місці, тому в роботі рекомендую саме його. Також ви можете знайти велику кількість інших сайтів, якщо наберете в пошуковику приблизно такі словосполучення "background image patterns", "download background image for site" і так далі.
У кого з англійською проблем немає, то ви розберетеся без труднощів.
У цій статті я вибрав тему і називається вона tweed. Завантажити ви можете її.
Ось як вона виглядає у невеликому варіанті на сайті
На початку створюємо новий документ у програмі
І обов'язково перед його редагуванням зберігаємо під ім'ям, наприклад index.htmlі створюємо папку на комп'ютері, наприклад можна створити папку My site і вже в неї поміщати наш індексний файл (index.html). Краще створювати папку англійською мовою, щоб не було плутанини у браузера і некоректного відображення сайту.
Крім цього в головній папці "my site" вам потрібно створити ще дві підпапки, в одне ми будемо поміщати всі наші картинки і називатися вона буде "images", а інший дамо назву "CSS" (каскадні таблиці стилів) і помістимо туди файл style.css
Тепер можна виконувати роботу в нашому документі. Наступним кроком нам потрібно вставити заготівлю HTML коду, так званий, основний каркас з якого все починається. Його скачати ви можете прямо. Далі скопіюємо все з цього файлу та перенесемо у файл нашої програми. У результаті має вийти щось на кшталт наступного
Поряд із назвою файлу ви помітите червону дискетку. Так от, якщо вона червона, значить файл не збережений, обов'язково натискайте кнопку зберегти, щоб дискетка стала синьою.
У тезі title можна змінити назву документа, наприклад, зробити «Моя перша веб-сторінка». І переконайтеся, що ваша сторінка збережена в кодуванні UTF - 8
В іншому випадку, якщо буде стояти інше кодування, наприклад windows-1251, то текст документа в браузері відображатиметься ієрогліфами. Змінити кодування можна у розділі «Кодіювання – Кодувати в Utf-8 (без BOM)» на панелі інструментів програми.
І не забуваємо кожну нашу дію зберігати.
Тепер почнемо створення фону в нашому документі. Відразу скажу, що всі наші дії над оформленням веб-сторінки відбуватимуться за допомогою каскадних таблиць стилів, званих CSS, тобто каркас ми будемо робити в html, а приводити його до красивого стилю та вигляду за допомогою CSS.
Таким чином, ви привчіть себе до правильного порядку дій. Не варто прямо в HTML документі займатися стилями, краще винесіть їх в окремий документ.
Для цього в нашій програмі Notepad++ створимо ще один файл і назвемо його Style.css та збережемо його в новій папці css, яка буде знаходитись у спільній папці «My site»
Чудово! Щоб наш браузер правильно відобразив сторінку, нам необхідно підключити таблицю стилів у наш html документ. Ось як це робиться
Прямо повністю вводимо весь рядок над . Цим рядком ми підключаємо таблицю стилів.
Тепер ми для нашого тега body визначимо фонове зображення через таблицю стилів. Для цього ми у документі style.css створюємо наступну структуру (прямо також берете та пишіть у коді програми)
Тут трохи поясню. У атрибута background є багато значень, одне з яких background-repeat, яке відповідає саме за те, щоб розтягнути нашу фонову картинку для веб-документа.
BACKGROUND-REPEAT:
REPEAT //(розтиражувати по горизонталі та вертикалі) REPEAT-X // (розтягнути тільки по горизонталі) REPEAT-Y //(розтягнути тільки вертикалі) NO-REPEAT //(не повторювати фонову картинку)
У нашому випадку ми нашу маленьку картинку тиражуємо і по вертикалі, і по горизонталі. Внаслідок чого вся сторінка виявляється заповненою нашим зображенням. Ось як це виглядає у результаті в браузері:
Також спеціально для вас зробив добірку сайтів, де ви можете завантажити гарний фон для сайту.
Від автора:всіх вітаю. Фонові кольори та зображення у веб-дизайні мають величезну роль, оскільки дозволяють привабливіше оформити будь-які елементи. Як зробити фон у 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 повна прозорість.
Влад Мержевич
У зв'язку з особливостями веб-сторінок, фонові малюнки набувають значної ролі при верстці документів сайту. При цьому вони беруть активну участь у різних справах, наприклад, автоматизують процес приєднання малюнків до тексту, створюють градієнтні переходи і, звичайно, додають фон під вмістом. Далі розглянуто деякі аспекти застосування фонових зображень.
Фон на веб-сторінці
Встановлення фонового малюнка на веб-сторінку зазвичай відбувається через атрибут background тега
. Такий малюнок повторюється по горизонталі та вертикалі, заповнюючи у такий спосіб все вікно браузера. Зрозуміло, що особливих варіантів для творчості тут немає, тому звернемося до стилів і подивимося, що можна робити за допомогою CSS.CSS містить п'ять атрибутів, які керують фоновою картинкою: її додаванням, положенням і повторенням. Однак усі ці параметри замінюють одну універсальну властивість background , його і будемо використовувати надалі.
Додавання фонового малюнка
Додавання малюнка відбувається шляхом встановлення адреси зображення через ключове слово url. Щоб керувати повторенням картинки, застосовуються аргументи no-repeat (немає повторення), repeat-x (повторення по горизонталі) і repeat-y (повторення по вертикалі). Завдяки цьому можна отримати веб-сторінку, наведену на рис. 1.
Щоб встановити зображення на веб-сторінку, слід додати стильову властивість background до селектора BODY , як показано в прикладі 1.
Приклад 1. Фоновий малюнок
У цьому прикладі графічний малюнок target.gif визначається як тло веб-сторінки без повторення зображення. Щоб картинка не прилягала щільно до країв браузера, вона зміщується на 30 пікселів праворуч і 20 пікселів вниз від свого вихідного положення.
Повторення малюнка
Завдяки тому, що можна задавати повторення фонового малюнка по горизонталі або вертикалі, є кілька варіантів оформлення веб-сторінок. Наприклад, для створення вертикальної смуги по лівому краю (мал. 2) знадобиться зображення, показане на рис. 3.
Малюнок має бути таким, щоб по вертикалі він стикувався між собою без помітних швів, а також складав єдине ціле із заданим кольором фону веб-сторінки. У прикладі 2 наводиться створення такого фонового малюнка, знову ж таки за допомогою властивості background та його значення repeat-y.
Приклад 2. Повторення фону по вертикалі
Аналогічно можна робити повторення фону по горизонталі, наприклад, створивши градієнт і встановивши його як фоновий малюнок (рис. 4).
Щоб отримати веб-сторінку на рис. 4, потрібно спочатку зробити картинку з градієнтним переходом. Ширину достатньо вказати 20-40 пікселів, а висота малюнка залежить від мети документа та передбачуваної висоти вмісту веб-сторінки. Не варто також забувати, що малюнок великого розміру призведе до збільшення обсягу графічного файлу. І це негативно позначиться швидкості його завантаження і, зрештою, призведе до уповільнення відображення фону. Для цього випадку цілком підійшла картинка розміром 30х200 пікселів (рис. 5).
У прикладі 3 показаний HTML код для створення градієнтного фону.
Приклад 3. Повторення фону по горизонталі
Градієнтний малюнок добре поєднується з одноколірним блоком, тому в цьому прикладі додається шар, в якому відображається вміст веб-сторінки.
Додавання малюнка до тексту
За допомогою фонового зображення можна автоматизувати процес додавання малюнків до певного тексту, наприклад до заголовків. Для цього використовується універсальна властивість background, яка застосовується до потрібного селектора. Як значення вказують шлях до малюнка і щоб він не повторювався, аргумент no-repeat (приклад 4).
Приклад 4. Додавання малюнка
Заголовок
Основний текст
Як показано в даному прикладі, малюнок можна зрушувати по горизонталі та вертикалі щодо свого вихідного положення, за умовчанням це верхній лівий кут блокового елемента. Зсув фону дозволяє встановити зображення по відношенню до тексту бажаним чином. Щоб текст не накладався на малюнок, обов'язково слід додати властивість padding-left за рахунок нього текст зміщується вправо на вказану відстань. Воно в кожному випадку індивідуальне і зазвичай дорівнює ширині малюнка плюс бажаному відступу між зображенням та текстом.
Вступ
Якщо Ви ще не знаєте, як встановлювати фон на сайт, Вам буде корисно ознайомитися з цією статтею. З неї Ви дізнаєтеся, як встановити картинку у вигляді фонового зображення, задати параметри для його відображення, або просто залити фон певним кольором.
CSS нам на допомогу
Як Ви вже здогадалися, встановлюватимемо фон за допомогою додавання CSS стилів до html об'єкта. За відображення фону елемента відповідає універсальна властивість background. Якщо потрібно додати фон до одного певного елемента, додайте CSS властивості до його ідентифікатора або класу. Якщо для всього сайту, то до тега body або ідентифікатора (класу) контейнера (обгортки), якщо він перекриває body. У цій статті у прикладах ми будемо працювати з елементом body.
Заливка кольором
Почнемо з найпростішого – заливкою певним кольором. Для цього нам доведеться знати лише код кольору і CSS властивість background-color.
Body (background-color: #000; /* Заливка фону чорним кольором */ )
Цей код встановить суцільне чорне тло для Вашого сайту. В якості фонового кольору може бути обраний будь-який інший шляхом зміни його коду.
Якщо Ви застосовуєте заливку фону для певного елемента, наприклад, для заголовка (h1-h6), параграфа (p) та ін., то переконайтеся, що колір тексту не зливатиметься з фоном і не втратить читабельність. Використовуйте параметр color для зміни кольору тексту.
P ( background-color: #000; /* Заливка фону чорним кольором */ color: #fff; /* Білий текст для чорного фону */ )
Фонове зображення
Фонове зображення для елемента встановлюється за допомогою властивості background-image, в якому значення використовується шлях до графічного файлу. Шлях до файлу визначається за допомогою конструкції url(
Рекомендується заводити окрему папку для всіх зображень та вказувати абсолютний шлях до файлу, тобто. від кореневої папки. Це покращить структуру вашого сайту і позбавить проблем у випадку, якщо Ви вирішите поміняти розташування самого CSS файлу.
Body (background-image: url(/images/background.png); /* Абсолютний шлях до фонового зображення background.png */ )
Якщо використовується фонове зображення, то рекомендується одночасно з ним вказувати заливку кольору (властивістю background-color). В даному випадку, якщо зображення не завантажиться (зображення не доступне з яких-небудь причин; у користувача вимкнено показ картинок), або завантажиться із затримкою (картинка повністю завантажиться пізніше сторінки), то буде показано фонове заливання замість зображення або поки воно не завантажиться повністю .
Body ( background-image: url(/images/background.png); /* Абсолютний шлях до фонового зображення background.png */ background-color: #ab11cf; /* Заливка фону певним кольором */ )
Дані дві властивості прикладу вище можна об'єднати в один, використовуючи універсальну властивість background.
Body ( background: #ab11cf url(/images/background.png); /* Колір заливки та шлях до фонового зображення */ )
Властивість background
Універсальна властивість background дозволяє встановити всі параметри відображення фонового зображення в одному рядку. Розглянемо доступні параметри.
Background: | inherit
Порядок слідування значень може бути довільним, а якщо якась властивість не вказана, то використовується значення за промовчанням.
background-attachment
Ця властивість визначає, чи прокручуватиметься фонове зображення разом із вмістом елемента. Якщо потрібно зафіксувати зображення, використовуйте значення fixed. У цьому випадку зображення буде нерухомим під час прокручування вмісту сторінки. Якщо потрібно, щоб зображення переміщалося разом із вмістом сайту, використовуйте значення scroll. За замовчуванням встановлюється значення scroll.
Body ( background-image: url(/images/background.png); /* Абсолютний шлях до фонового зображення background.png */ background-attachment: fixed; /* Зображення зафіксовано */ background-color: #ab11cf; /* Заливка фону певним кольором */)
Еквівалентно:
Body ( background: #ab11cf url(/images/background.png) fixed; /* Колір заливки та шлях до зафіксованого фонового зображення */ )
background-position
Якщо задано фонове зображення, ця властивість визначає його початкове положення. Має два значення, розділені пропуском: положення по горизонталі та положення по вертикалі. Значення можна встановити за допомогою ключових слів: left right top bottom center. Порядок їх слідування не важливий. Якщо значення задаються у відсотках, пікселях тощо, то спочатку вказується значення по горизонталі, а потім по вертикалі. За умовчанням позиція встановлюється у лівий верхній кут (Left Top).
background-repeat
Визначає спосіб повторення зображення. Його можна повторювати тільки по горизонталі (repeat-x), або лише по вертикалі (repeat-y), або одночасно по горизонталі та вертикалі (repeat), або без повторень взагалі (no-repeat). За промовчанням встановлюється значення repeat.
inherit
Служить для явного вказівки успадкування властивостей батьківського елемента.
Гальмує
