В этом уроке мы с вами научимся делать свой сайт энергичным и привлекательным для посетителей, а именно:
задавать цвет фона самой веб-страницы и элементов на ней, а также использовать в качестве фона произвольное
изображение. Всё это можно очень легко и лаконично сделать с помощью CSS. Фоновые изображения CSS являются одним из самых важных
инструментов, которые имеются в вашем распоряжении, так как позволяют применять декоративные изображения
в определенных частях HTML, не добавляя ничего лишнего в HTML-код.
Итак, применить фон мы можем как для самой страницы в целом, так и для любых элементов на ней: для шапки
сайта, блоков навигации, основного контента и т.д. Даже фон заголовков, ссылов и изображений можно
переопределить.
Фоном может быть определённый цвет в любом формате или декоративное изображение, причём это изображение
может располагаться в любой области элемента и повторяться так, как нам нужно.
Кроме того, можно установить определённую степень прозрачности фоновых изображений, а также накладывать
одно изображение на другое, используя z-индекс (этой теме посвящён отдельный урок).
За установку фона и его параметров отвечает универсальное свойство background, с его помощью
можно устанавливать до 5 характеристик фона. Ни одно из его значений не является обязательным.
Давайте рассмотрим все значения свойства background:
background-attachment - определяет, будет ли фоновое изображение при прокручивании страницы вниз
перемещаться вместе с содержимым элемента (например, текстом) или оставаться зафиксированным; значения:
fixed - фоновое изображение остаётся неподвижным,
scroll ( умолчанию) - фоновое изображение прокручивается вместе с содержимым,
inherit - наследует значение родительского элемента.
Для демонстрации эффекта, создаваемого значением fixed, можете скопировать пример документа из окна ниже,
вставить его в блокнот, сохранить с расширением .html и открыть в браузере:
background-position - указывает область вывода изображений. Изображения могут
выводиться в любом месте в границах элемента HTML, к которому они применяются. Это свойство применяется
для точного размещения картинок для визуальных эффектор и наложения слоёв. Есть несколько способов
указать позицию фона:
ключевые слова: top, right, bottom, left и center (центр по горизонтали и по вертикали).
значения в пикселях - очень точны, но не адаптируются к изменению высоты и ширины. Могут быть со значением "-".
С такими значениями они часто используются для создания спрайтов.
значения в % - проценты смещают изображение на указанный процент разницы между размером
содержащего бокса и размером изображения. Если изображение и содержащий бокс имеют один размер,
то проценты вообще не будут смещать изображение.
При использовании процентов и пикселей начальной точкой всегда является верхний левый угол
элемента HTML. При описании правил можно смешивать проценты и пиксели, но никак не ключевые слова
и проценты или ключевые слова и пиксели.
Различные примеры позиций фонового изображения, использующие ключевые слова, проценты, и пиксели,
приведены на очень наглядном рисунке ниже:
background-repeat - это значение задаёт повторяемость фоновой картинки. По умолчанию стоит
значение repeat, то есть фоновая картинка, как плитка, будет повторяться по ширине и длине
фона страницы или элемента. Кроме этого, необязательного, можно указать следующие значения:
no-repeat - устанавливает одно фоновое изображение, положение которого будет
определяться свойством background-position.
repeat-x - изображение будет повторяться только по оси х.
repeat-y - изображение будет повторяться только по оси у.
inherit - наследует значение родителя.
Пример использования значения repeat-y:
Каждое свойство фона имеет значение по умолчанию — если вы не определяете значение в таблице стилей CSS,
будет использоваться значение по умолчанию. Каждое свойство фона имеет значение по умолчанию — если вы не определяете значение в таблице стилей CSS,
будет использоваться значение по умолчанию.
Вот правило CSS для этого блока:
background-color - определяет цвет фона страницы или отдельного элемента. Можно указывать
в формате RGB, используя шестнадцатеричную запись (#......) или названия цветов. Допустимые значения:
color - цвет,
transparent - прозрачность,
inherit.
background-image - указывает путь доступа или URL фонового изображения. Значение пишется в
следующем формате:
url(адрес фона)
Допустимые значения: URL, none или inherit.
При описании фона можно использовать сокращённую запись, когда все значения перечисляются в одном правиле,
например:
При объединении отдельных свойств фона в группу, всегда размещайте свойства в следующем порядке - это важно
как для межбраузерной совместимости, так и для организации и обслуживания таблицы стилей:
цвет,
изображение,
повторение,
присоединение,
горизонтальная позиция,
вертикальная позиция.
Пробуйте и экспериментируйте. До встречи в следующем уроке!
