Конспект «Фоны. Знакомство». Раздел 1
Свойство background-color
Цвет фона можно задать с помощью CSS-свойства background-color
.
Цвета в CSS можно задавать в разных форматах: в шестнадцатеричном (или HEX), в RGB или RGBA, а также с помощью цветовых констант, таких как red
или green
.
Вот пример использования свойства:
selector {
background-color: #ff0000;
}
Свойство background-image
Фоновое изображение можно задать с помощью CSS-свойства background-image
. Адрес картинки обязательно заключается внутрь url("...")
. Например:
selector {
background-image: url("адрес-картинки");
}
Элементу можно одновременно задавать и цвет фона, и фоновую картинку. В этом случае картинка будет отображаться поверх фонового цвета.
Свойство background-repeat
По умолчанию фоновое изображение повторяется. Управлять этим поведением можно с помощью CSS-свойства background-repeat
. У свойства 4 значения:
repeat
— повторять во всех направлениях. Это значение по умолчанию.repeat-x
— повторять только по горизонтали.repeat-y
— повторять только по вертикали.no-repeat
— не повторять.
Свойство background-position
Свойство background-position
управляет расположением фонового изображения. Значение свойства состоит из двух частей, разделенных пробелом: x y
.
x
задаёт расположение по горизонтали, а y
по вертикали.
В качестве значения x
можно использовать ключевые слова left
, center
, right
, значения в процентах и в пикселях.
В качестве значения y
можно использовать ключевые слова top
, center
, bottom
, значения в процентах и в пикселях.
Когда фоновое изображение больше блока, то оно обрезается. С помощью свойства background-position
можно управлять тем, какая часть изображения будет обрезана. Для этого можно использовать относительные значения (проценты), а иногда абсолютные (пиксели). Можно использовать отрицательные значения, а также комбинировать пиксели и проценты.
Свойство background-attachment
С помощью свойства background-attachment
можно зафиксировать фон на месте и он не будет перемещаться при прокручивании окна.
Значение свойства:
scroll
— фон прокручивается вместе с содержимым. Это значение по умолчанию.fixed
— фон не прокручивается, зафиксирован на одном месте.
Свойство background
Задать фон можно с помощью сокращенного свойства background
, в котором через пробел перечисляются его компоненты:
background: [bc] [bi] [br] [bp] [ba];
/* Обозначения:
[bc] — background-color
[bi] — background-image
[br] — background-repeat
[bp] — background-position
[ba] — background-attachment
*/
Если какой-то компонент не указан, то берется значение по умолчанию.