Cвойство background-color
Цвет фона можно задать с помощью CSS-свойства background-color.
Напомню, что цвета в CSS можно задавать в разных форматах: в шестнадцатеричном (или HEX), в RGB или RGBA, а также с помощью цветовых констант, таких как red или green.
Пример:
selector {
background-color: #ff0000;
}
Свойство background-image
Фоновое изображение можно задать с помощью CSS-свойства background-image.
Пример:
selector {
background-image: url("../images/bg.png");
}
Адрес картинки обязательно заключается внутрь url("..."). Элементу можно одновременно задавать и цвет фона, и фоновую картинку. В этом случае картинка будет отображаться поверх фонового цвета.
Свойство background-repeat
По умолчанию фоновое изображение повторяется. Это хорошо заметно, когда оно меньше блока. Управлять этим поведением можно с помощью CSS-свойства background-repeat. У свойства 4 значения:
- repeat - повторять во всех направлениях. Это значение по умолчанию.
- repeat-x - повторять только по горизонтали.
- repeat-y - повторять только по вертикали.
- no-repeat - не повторять.
Свойство background-position
Cвойство background-position управляет расположением фонового изображения. Значение свойства состоит из двух частей, разделенных пробелом: x y.
x задаёт расположение по горизонтали, а y по вертикали.
В качестве значения x можно использовать ключевые слова left, center, right, значения в процентах и в пикселях.
В качестве значения y можно использовать ключевые слова top, center, bottom, значения в процентах и в пикселях.
Примеры использования свойства:
background-position: 20% 30%;
background-position: right top;
background-position: 50px 100px;
Свойство background-attachment
Обычно фоновое изображение прокручивается вместе с содержимым блока. Это хорошо видно в мини-браузере. Прокрутите окно вниз и увидите, что фон поднимется наверх.
С помощью свойства background-attachment можно зафиксировать фон на месте и он не будет перемещаться при прокручивании.
Значение свойства:
- scroll - фон прокручивается вместе с содержимым. Это значение по умолчанию;
- fixed - фон не прокручивается, зафиксирован на одном месте.
Свойство background
Фон элемента можно задавать с помощью отдельных свойств: background-color, background-image и т.д. Получается довольно громоздкая запись.
Также задать фон можно с помощью сокращенного свойства background, в котором через пробел перечисляются его компоненты:
background: background-color background-image background-repeat background-position background-attachment;
Если какой-то компонент не указан, то берется значение по умолчанию.
Например:
background: #ссс;
background: url("../images/picture.png") 10px 20px;