Від автора: вітаю вас на webformyself і хочу сьогодні розповісти вам, як змінити фон сайту. Фоновий колір або зображення на задньому плані можуть відігравати величезну роль у сприйнятті сайту, тому ви повинні знати, як його встановлювати.
Як поміняти фон у wordpress
Знову ж таки, якщо у вас движок wordpress, то змінити загальний фон сторінки не складе праці. Потрібно всього лише натиснути кнопку “Налаштувати” у вкладці “вигляд”. Тут потрібно вибрати “Кольору”. В залежності від обраного шаблону, тут може бути можливість вибирати кольори для різних елементів. Але колір сторінки ви можете вибрати будь-якому випадку – перед вами відкриється зручна кольорова панель.
Кількість налаштувань тут залежить від того, який у вас стоїть шаблон. У будь-якому випадку, виразно точно там повинна бути можливість встановити колір для всієї сторінки, в різних шаблонах також можна встановити фон і колір для заголовків, посилань і т. д.
Власне, це все, що вам потрібно знати. Якщо потрібно завантажити саме фонове зображення – вибираєте відповідний пункт і знаходите на комп’ютері потрібний файл.
По-хорошому, картинка не повинна бути занадто важкою, тому що це дуже сильно вдарить по швидкості завантаження сайту. Ідеально використовувати так звані безшовні фонові зображення, які повторюються по горизонталі і вертикалі і так заповнюють весь простір.
Після завантаження зображення перед вами з’явитися пару корисних параметрів. Зручність wordpress в тому, що ви бачите зміни негайно, в залежності від того, які налаштування вибираєте.
По-перше, вам запропонують вибрати спосіб повторення. Тут аж 4 варіанти: повторювати тільки по горизонталі, вертикалі, по обидва боки і не повторювати. В залежності від того, яке ви використовуєте зображення, ви повинні зробити вибір.
Повторення дозволяє істотно заощадити на розмірі картинки, коли вона невеликих розмірів і може повторюватися, так щоб не було видно різких переходів між повтореннями. Так можна заощаджувати десятки кілобайт порівняно зі способом, при якому вантажиться переконливе зображення великих розмірів.
Позиція. Тут нічого пояснювати, просто подивіться, як змінюється зовнішній вигляд сторінки з різною позицією фону. Виберіть той варіант, який вам більше подобається.
Прив’язка. Це дуже цікава налаштування, вона дозволяє вибрати, прокручувати чи фонову картинку разом з вмістом або зафіксувати його на одному місці. Особисто мені завжди подобається вибирати фіксований варіант, тому що при прокрутці вниз рухаються тільки блоки з контентом.
Наприклад, якщо у вас висота фонової картинки 1000 пікселів, ви її не повторюєте і не фіксуєте, то при прокрутці вниз вона просто зникне з виду. Фіксація фону дозволяє картинці постійно залишатися на увазі. Іноді це дуже ефектне рішення.
Власне, на цьому все по зміні фону в wordpress. Як бачите, все максимально просто.
Як змінити фон сайту в html
Добре, ми розібрали чисто візуальний варіант, в якій не потрібно лізти в код і щось там прописувати. Тепер давайте розберемося, як все-таки змінювати фон через html і css. Які це дає переваги? Ви можете задавати фонові зображення не тільки для сайту загалом, але й для кожного елемента окремо. Наприклад, для якогось віджета, меню, шапки і т. д. Це дає набагато більше можливостей в оформленні сайту і зміну його дизайну.
Для того, щоб отримати доступ до всього цього оформлення, вам треба знайти головну таблицю стилів вашого шаблону. Зазвичай вона розташовується в корені, або в папці css, і називається style.css або main.css.
У ній ви побачите код, який оформляє різні елементи вашого сайту. Якщо ви хочете задати фон глобально, це можна зробити за допомогою прописування фону селектору body, тобто тілу сторінки.
Як задається фон?
Запам’ятайте – властивість background. Сьогодні краще використовувати саме скорочений варіант запису цього властивості. Наприклад:
body{
background: #ccc url(bg.png) no-repeat 50% 50% fixed;
}
Що все це значить? Першим параметром зазвичай задають суцільний колір. Припустимо, задаємо сірий. Колір можна і не вказувати, якщо вказано фонове зображення. Як бачите, картинка задається з допомогою конструкції url(шлях до файлу). Відповідно, вам потрібно правильно записати шлях до файлу, а ще обов’язково вказуйте його розширення.
Всі параметри, що я записав після цього, є необов’язковими і прописуються за бажанням. Так, я вказав, щоб фонова картинка не повторювалася, позиціонувалася по центру як по горизонталі, так і по вертикалі, а також зафіксувалася на одному місці, щоб не зникати при прокручуванні.
Як бачите, тут все ті ж параметри, що ви налаштовували візуально, але тут вони прописуються в якості значень властивості background.
У даному прикладі я використовував скорочений запис властивості, просто так зручніше, але насправді для кожного окремого параметра є своє властивість: background-color для кольору, background-image для картинки, background-position для завдання позиції.
Звичайно, для вільного володіння цими властивостями я раджу вам для початку пройти наш курс css для початківців, а якщо ви хочете стати просунутим користувачем відносно мови css, то курс з нової версії цієї технології. Там ви навчитеся ставити кілька фонів одночасно, налаштовувати їх повторення, використовувати градієнти і т. д. Інформація дуже цікава і корисна для сайтостроителей.
Ну а про основи роботи з фоном я вам розповів. Підписуйтесь на наш портал щоб отримувати новини і дізнаватися більше про сайтобудуванні.
