Фон можна вказати для фрагмента тексту (вбудованого елемента), блокового елемента, таблиці, її осередки і всієї Web-сторінки. Добре підібраний фон може оживити Web-сторінку і виділити окремі її елементи.
Фон у окремих елементів, відмінний від фону самої Web-сторінки, слід заду-вать тільки в крайніх випадках. Інакше Web-сторінка стане занадто строкатої і незручною для читання.
Атрибут стилю background-color служить для завдання кольору фону:
Колір можна задати у вигляді RGB-коду або імені. Значення transparent прибирає фон зовсім; тоді елемент Web-сторінки отримає "прозорий" фон. За замовчуванням фон у елементів Web-сторінки відсутній, а фон самої Web-сторінки задає Web-оглядач.
BODY
Тут ми задали для всієї Web-сторінки чорний фон і білий текст.
Атрибут стилю background-image дозволяє призначити в якості фону графічне зображення (фонове зображення):
Значення none прибирає графічний фон.
Графічний фон виводиться поверх звичайного фону, заданого нами за допомогою атрибута стилю background-color. І, якщо фонове зображення містить "про прозорі" фрагменти (таку можливість підтримують формати GIF і PNG), цей фон буде "просвічувати" крізь них.
TABLE.yellow
Тут ми задали для таблиці і звичайний, і графічний фон. Це, до речі, поширена практика в Web-дизайні.
Щоб друкувати водяний знак менше, ніж елемент Web-сторінки (або сама Web-сторінка), для якого воно задано, Web-оглядач буде повторювати це зображення, поки не "Замостя" їм весь елемент. Параметри цього повторення задає атрибут стилю background-repeat:
Тут доступні чотири значення.
- no-repeat - фонове зображення не буде повторюватися ніколи; в цьому випадку частина фону елемента Web-сторінки залишиться не заповненої їм.
- repeat - фонове зображення буде повторюватися по горизонталі і вертикалі (звичайну поведінку).
- repeat-x - фонове зображення буде повторюватися тільки по горизонталі.
- repeat-y - фонове зображення буде повторюватися тільки по вертикалі.
За допомогою атрибута стилю background-position можна вказати позицію фонового зображення щодо елемента Web-сторінки, для якого воно призначене:
background-position: <горизонтальная позиция> [<вертикальная позиция>] |
inherit;
Горизонтальна позиція фонового зображення задається в наступному форматі:
Числове значення вказує місце розташування фонового зображення в елементі Web-сторінки по горизонталі і може бути задано з застосуванням будь-який з підтримуваних CSS одиниць вимірювання (див. Табл. 8.1). Також можна вказати дотримуюся-щие значення:
- left - фонове зображення притискається до лівого краю елемента Web-сторінки (це звичайна поведінка);
- center - розташовується по центру;
- right - притискається до правого краю.
Формат завдання вертикальної позиції фонового зображення такий:
Числове значення вказує місце розташування фонового зображення в елементі Web-сторінки по вертикалі і може бути задано з застосуванням будь-який з підтримуваних CSS одиниць виміру.
Також можливі наступні значення:
- top - фонове зображення притискається до верхнього краю елемента Web-сторінки (це звичайна поведінка);
- center - розташовується по центру;
- bottom - притискається до нижнього краю.
Якщо для будь-якого елемента Web-сторінки вказана тільки позиція фонового зображення по горизонталі, його вертикальна позиція приймається рівною center.
TABLE.bgr (background-position: 1cm top>
Цей стиль поміщає фонове зображення на відстані 1 см від лівого краю елемента Web-сторінки і притискає його до нижнього краю даного елемента.
А ось стиль, притискає фонове зображення до правого краю елемента Web-сторінки і розташовує його в центрі даного елемента по вертикалі:
TABLE.bgr (background-position: right>
Коли ми прокручуємо вміст Web-сторінки у вікні Web-оглядача, разом з нею прокручується і фонове зображення (якщо воно є). Стандарт CSS пропонує забавну можливість - заборона прокрутки графічного фону Web-сторінки і фіксація його на місці. Фіксацією фону управляє атрибут стилю background-attachment:
Значення scroll змушує Web-оглядач прокручувати фон разом з вмістом Web-сторінки (це поведінка за умовчанням). Значення fixed фіксує фон на місці, і він не буде прокручуватися.
Ймовірно, має сенс фіксувати тільки графічний фон, заданий для самої Web-сторінки. Графічний фон у окремих елементів Web-сторінки фіксувати не слід.
На цьому ми поки закінчимо з атрибутами стилю CSS.