Свойство BACKGROUND
| Свойство | Значения | Пр* | Нc* |
|---|---|---|---|
| background | [ background-color; background-image; background-repeat; background-attachment; background-positon ] | + | - |
| background-attachment | scroll, fixed, inherit | + | - |
| background-color | ЦВЕТ, transparent, inherit | + | - |
| background-image | URL, none, inherit | + | - |
| background-position | [ %, ДЛИНА, left, center, right ]; [ %, ДЛИНА, top, center, bottom], inherit | * | - |
| background-repeat | repeat, repeat-x, repeat-y, no-repeat, inherit | + | - |
Сокращенная форма задания отдельных свойств фона в одном свойстве. Сокращает код и лучше поддерживается старыми версиями браузеров, чем указание свойств фона раздельно.
ПРИМЕНЕНИЕ:
body { background: #666 url(../images/img-1.gif) 100% 0% repeat-y;} — для селектора Body задан серый цвет фона, фоновое изображение img-1.gif — располагается в правом верхнем углу и повторяется по вертикали:
Background-attachment
Свойство определяет закрепление или перемещаемость фонового изображения.
ЗНАЧЕНИЯ:
• scroll — фоновое изображение перемещается вместе с элементом при прокрутке страницы.
• fixed — фиксирует фоновое изображение.
• inherit — наследование от родительского элемента.
Background-color
Свойство задает цвет фона элементов. Цвет заполняет всю область содержимого элемента, включая отступы — Padding, до внешнего края его рамки — Border.
ЗНАЧЕНИЯ:
• Цвет
• transparent — задает прозрачный цвет фона.
• inherit — наследование от родительского элемента.
Background-image
Свойство задает фоновое изображение для элемента, которое с помощью значения свойства Background-repeat может выкладываться мозаикой по осям во всех направлениях, либо не повторяться.
ЗНАЧЕНИЯ:
• URL — путь к файлу изображения, синтаксис: url(…).
• none — нет фонового изображения.
• inherit — наследование от родительского элемента.
Background-position
Свойство устанавливает местоположение фонового изображения. Служит исходной точкой, от которой рассчитывается повторение фонового изображения, если применяется свойство Background-repeat.
ОБЛАСТЬ ПРИМЕНЕНИЯ*: блочные и замещаемые элементы.
ЗНАЧЕНИЯ (по умолчанию: 0% 0% — левый верхний угол):
• inherit — наследование от родительского элемента.
Возможно применение разных единиц, наиболее удобные — px или %. Первое значение — горизонтальное расположение, второе — расположение по вертикали.
ПРИМЕР:
body { background-color: #00ff00; background-image: url(../images/img-2.gif); background-position: 50% 0%; background-repeat: no-repeat;} — фоновое изображение располагается по центру и вверху:
Другой способ: значения left, center, right — расположения по горизонтали, соответственно, top, center, bottom — по вертикали.
ПРИМЕР:
body { background-image: url(../images/img-2.gif); background-position: center top;} — аналог предыдущего примера: расположение фонового изображения по центру и вверху.
Можно использовать … background-position: top center;}, т.е. поменять местами значения center и top — расположение не изменится: по центру и вверху.
И последнее, если указать только один параметр … background-position: top;} — то предполагается, что другой будет center, а расположение изображения будет, как и прежде: по центру и вверху.
ПРИМЕРЫ ЗНАЧЕНИЙ:
•100% 100% — расположение в правом нижнем углу, равнозначно: right bottom или bottom right.
•0% 50% — расположение слева и по центру, равнозначно: left center или center left или left.
Background-repeat
Свойство устанавливает порядок мозаичного размещения фонового изображения по осям в обоих направлениях.
ЗНАЧЕНИЯ:
• repeat — задает повторение фонового изображения относительно и горизонтальной, и вертикальной оси.
• repeat-x — повторение вдоль горизонтальной оси.
• repeat-y — повторение вдоль вертикальной оси.
• no-repeat — без повторения.
• inherit — наследование от родительского элемента.
Поделиться с друзьями:
Комментариев нет:
Отправить комментарий