Создание сайтов с нуля - урок 21 - Работа с фоном, 1 часть

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;