Як встановити безшовний фон
Як встановити фон на сайт?
Якщо Ви ще не знаєте як встановлювати фон на сайт, Вам буде корисно ознайомитися з цією статтею. З неї Ви дізнаєтесь як встановити картинку у вигляді фонового зображення, задати параметри для його відображення, або просто залити фон певним кольором.
CSS нам на допомогу
Як Ви вже здогадалися, встановлювати фон ми будемо за допомогою додавання CSS стилів до html об'єкту. За відображення фону елемента відповідає універсальна властивість background. Якщо потрібно додати фон до одного певного елементу, то додавайте CSS властивості до його ідентифікатором або класу. Якщо для всього сайту, то до тегу body чи кодом (класу) контейнера (обгортки), якщо він перекриває body. У даній статті в прикладах ми будемо працювати з елементом body.
заливка кольором
Почнемо з найпростішого - заливанням певним кольором. Для цього нам знадобитися знати лише код кольору і CSS властивість background-color.
Даний код встановить суцільний чорний фон для Вашого сайту. В якості фонового кольору може бути обраний будь-який інший, шляхом зміни його коду.
Якщо Ви застосовуєте заливку фону для певного елемента, наприклад, для заголовка (h1-h6), параграфа (p) і ін. То переконаєтеся, що колір тексту не буде зливатися з фоном і не втратить Новомосковскбельность. Використовуйте властивість color для зміни кольору тексту.
фонове зображення
Фонове зображення для елемента встановлюється за допомогою властивості background-image, в якому в якості значення використовується шлях до графічного файлу. Шлях до файлу задається за допомогою конструкції url (
Рекомендується заводити окрему папку для всіх зображень і вказувати абсолютний шлях до файлу, тобто від кореневої папки. Це поліпшить структуру вашого сайту і позбавить від проблем в разі, якщо Ви вирішите поміняти розташування самого CSS файлу.
Якщо використовується фонове зображення, то рекомендується одночасно з ним вказувати колірну заливку (властивістю background-color). В даному випадку, якщо зображення не завантажиться (зображення не є з яких-небудь причин; у користувача відключений показ картинок), або завантажиться з затримкою (картинка повністю завантажиться пізніше сторінки), то буде показана фонова заливка замість зображення або поки воно не завантажиться повністю .
Дані два властивості з прикладу вище можна об'єднати в один, використовуючи універсальну властивість background.
властивість background
Універсальна властивість background дозволяє задати всі параметри відображення фонового зображення в одному рядку. Розглянемо доступні параметри.
Порядок проходження значень може бути довільним, а якщо якесь властивість не вказано, то використовується значення за замовчуванням.
background-attachment
Дана властивість визначає, чи буде прокручуватися фонове зображення разом з вмістом елементу. Якщо необхідно зафіксувати зображення, використовуйте значення fixed. В даному випадку, зображення буде нерухомим при прокручуванні вмісту сторінки. Якщо необхідно, щоб зображення переміщалася разом з вмісті сайту, використовуйте значення scroll. За замовчуванням встановлюється в значення scroll.
background-position
Якщо задано фонове зображення, то ця властивість визначає його початкове положення. Має два значення, розділені пропуском: положення по горизонталі і положення по вертикалі. Значення можна задати за допомогою ключових слів: left right top bottom center. Порядок проходження їх не важливий. Якщо ж значення задаються у відсотках, пікселях і т.п. то спочатку вказується значення по горизонталі, а потім по вертикалі. За замовчуванням позиція встановлюється в лівий верхній кут (left top).
background-repeat
Визначає спосіб повторення фонового зображення. Його можна повторювати тільки по горизонталі (repeat-x), або тільки по вертикалі (repeat-y), або одночасно по горизонталі і вертикалі (repeat), або без повторень взагалі (no-repeat). За замовчуванням встановлюється значення repeat.
Служить для явної вказівки успадкування властивостей від батьківського елемента.