CSS3 Параметри фону

Фон можна визначати як для всієї html-сторінки, так і для окремих її елементів: тексту, таблиці, осередків таблиці та ін.

Колір фону CSS визначає атрибут стилюbackground-color :

Колір можна встановити за допомогою RGB-коду або імені. Значення transparent задає прозоре тло.

За замовчуванням фон елементів html-сторінки відсутній; фон html-сторінки визначається браузером.

За допомогою атрибуту стилюbackground-image як фон можна задавати графічне (фонове) зображення:

Значення none видаляє графічний фон.

Можна задавати колір фону та фонове зображення одночасно, при цьому "картинка" накладається поверх звичайного фону. Якщо фонове зображення містить прозорі області, через них буде просвічуватися колір фону.

Якщо фонове зображення менше, елемента html-сторінки, для якого встановлено, браузер повторюватиме "картинку" фону доки не заповнить простір всього елемента. Параметри такого повторення зображення задаються за допомогою атрибуту стилюbackground-repeat :

Значенняbackground-repeat :

  • no-repeat – фонове зображення не повторюється, частина фону залишається порожньою;
  • repeat - фонове зображення повторюється по горизонталі та вертикалі (значення за умовчанням);
  • repeat-x – фонове зображення повторюється тільки по горизонталі;
  • repeat-y – фонове зображення повторюється лише по вертикалі.
ПРИКЛАД:

background-position - визначає позицію фонового зображення щодо елемента html-сторінки:

Формат для горизонтальної позиції:

  • n - числове значення, яке вказує розташування фонового зображення щодо елементаhtml-сторінки по горизонталі;
  • left - фонове зображення розташовується біля лівого краю елемента html-сторінки (значення за замовчуванням);
  • right – у правого краю;
  • center – по центру.

Формат для вертикальної позиції:

  • n - числове значення, яке вказує розташування фонового зображення щодо елемента html-сторінки по вертикалі;
  • top - фонове зображення розташовується біля верхнього краю елемента HTML-сторінки (значення за замовчуванням);
  • bottom – у нижнього краю;
  • center – по центру.

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

ПРИКЛАД:

Поведінка фонового зображення при прокручуванні html-сторінки визначається атрибутом стилюbackground-attachment.

Значенняbackground-attachment :

  • scroll - фонове зображення прокручується разом із html-сторінкою;
  • fixed – фонове зображення фіксується на місці.