Фон для сайту

Останнє оновлення: Середа, 21 лютого 2024 Автор: Вольдемар Воронцовський

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

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

Якщо ми говоримо про тіло сайту, то тут слід виділити дві його складові: фон web-сторінки і фон її змісту. Основне завдання фону web-сторінки полягає в тому, щоб прибрати неминучі порожнечі на задній план і сфокусувати увагу користувача на вмісті сайту.

Як зробити фон для сайту?

Що собою являє фон? Зазвичай в якості фону для сайту виступають колір або картинка. Завдання кольору є найпростішим і найменш ресурсномістким варіантом.

У випадку з фонове, все дещо складніше. Картинка лягає поверх заданого кольору, що слід врахувати. Фонова картинка може повторюватися або зафіксованої на одному місці. Очевидно, що все це має свої нюанси.

Для фіксації знадобиться велика картинка, що потребує значних ресурсів і часу на завантаження web-сторінки. Іншими словами, ви фокусуєте увагу не стільки на зміст сайту, скільки на проблему з його завантаженням. Чи варто це робити?

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

Як змінити фон сайту?

Що таке сайт? Сайт (від англ. site) – це набір файлів, викладених на сервер і доступних в мережі Інтернет. Основу таких файлів складають web-сторінок у форматі HTML.

Сам ХТМЛ-документ складається з двох основних частин HEAD (метадані) та BODY (тіло документа). Очевидно, що фон сайту задається саме для другої частини. Це можна зробити через відповідні атрибути тега BODY, але краще і зручніше використовувати CSS. Нижче я спробую розібрати обидва варіанти.

Як зробити фон для сайту в HTML?

Як вже було сказано, працювати ми будемо з тегом BODY, і тут нас цікавить два атрибути: bgcolor і background. В якості прикладу наведу наступний варіант:

<body bgcolor="#ffffff" background="http://sitename.ru/images/bg.jpg">
...
</body>

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

Для того, щоб вказати в якості фону картинку, в тегу BODY використовується атрибут background, значенням якого є URL-адреса графічного файлу.

Примітно, що таким чином ви не можете контролювати позиціонування фонової картинки, її повторення на екрані, це можна зробити тільки через CSS-властивості.

Як зробити фон сайту в CSS?

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

body {
background-color: #ffffff;
background-image: url('http://sitename.ru/images/bg.jpg');
}

В даному випадку, властивість background-color задає колір тіла, а background-image – фонову картинку. Звертаю вашу увагу на те, що у другому властивість використовується конструкція url().

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

background-attachment: fixed; – встановлює, чи буде прокручуватися фонова картинка разом з вмістом сайту чи ні. Значення: fixed – означає зафіксувати положення фону сайту.
background-position: top left; – встановлює початкове положення фонової картинки. Значення: top left – означає, що картинка буде знаходиться в верхньому лівому куті.
background-repeat: no-repeat; – встановлює, як буде повторюватися фонова картинка. Значення: no-repeat – означає, що картинка повторюватися не буде. З цікавого зазначу значення repeat-x (повторення тільки по горизонталі) і repeat-y (повторення тільки по вертикалі).

Нижче я наведу ряд готових прикладів стандартних завдань.

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

Такий варіант актуальний, коли використовується велика картинка, яка повинна бути зафіксована при перегляді web-сторінки.

body {
background-color: #ffffff;
background-image: url('http://sitename.ru/images/bg.jpg');
background-attachment: fixed; /* фіксувати */
}

Як зробити фіксований фон зверху чи знизу?

Такий варіант актуальний, коли використовується фоновий колір і потрібно прикрасити зверху шапку або знизу підвал web-сторінки фонове, повторюється по горизонталі.

body {
background-color: #ffffff;
background-image: url('http://sitename.ru/images/bg.jpg');
background-position: top; /* закріпити зверху */
background-repeat: repeat-x; /* повторювати по горизонталі */
}

або

body {
background-color: #ffffff;
background-image: url('http://sitename.ru/images/bg.jpg');
background-position: bottom; /* закріпити знизу */
background-repeat: repeat-x; /* повторювати по горизонталі */
}

Думаю, ідею ви зрозуміли і зможете зробити теж саме з фіксацією фону ліворуч (left) та/або правому краю (right), але вже з повторенням по вертикалі (repeat-y). Також цікавим варіантом є випадок, коли в якості фону сайту виступає картинка для утримання, зазвичай по центру (center), повторення йде теж по вертикалі (repeat-y).

Підіб'ємо підсумки + відео

Дизайн сайту – це широке поле для творчості. Тут немає меж, але є рекомендації. Фон сайту багато в чому сприяє фокусуванні користувача на його утриманні. Оптимальний варіант: темний фон сайту, білий фон змісту, чорний текст і сині підкреслені посилання. Як говорить Стів Круг, фахівець з тестування юзабіліті та дизайну інтерфейсів: не змушуйте мене думати – і це правильно. У більшості з нас склалися певні стереотипи сприйняття і коли нас змушують їх ламати, це стомлює. Любіть своїх відвідувачів і читачів, вибирайте і використовуйте правильний фон сайту. Як це зробити в HTML і CSS ви тепер знаєте. У мене все. Дякую за увагу. Удачі!

Сподобався матеріал? Будь ласка, репости!

Вітаю всіх на нашому інтернет-журналі. Я - Вольдемар Воронцовський. Цей матеріал написаний і опублікований одним з наших авторів (експертом у своїй справі). За кожною статтею стоїть досвідчений співробітник нашої команди, який перевірив матеріал на помилки і актуальність. Познайомитися з нами можна в розділі - «Редакція сайту».

ІТ блог про: заробіток в інтернеті, інвестиції, бізнес, трейдинг, сайти та їх просування в пошукових системах

Фон для сайту

Як зробити фон для сайту?