③ Укладка изображений: свойство background-repeat

Продолжим изучение темы CSS - фон. Если пропустили прошлые статьи, то вот ссылки на них:

• ① Базовый цвет: свойство background-color
• ② Источник изображения: свойство background-image

Свойство background-repeat определяет, как фоновые изображения укладываются в области фона после того, как для них установлены размеры и позиционирование. Если значение свойства имеет два ключевых слова, первое используется для горизонтального направления, второе — для вертикального.

Свойство не наследуется.

background-repeat

Значения:

• repeat-x - Изображение повторяется в горизонтальном направлении. Вычисляется в repeat no-repeat.
• repeat-y - Изображение повторяется в вертикальном направлении. Вычисляется в no-repeat repeat.
• repeat - Изображение повторяется в обоих направлениях так часто, чтобы покрыть область отрисовки фона. Если изображение не помещается, оно обрезается. Вычисляется в repeat repeat. Значение по умолчанию.
• space - Изображение повторяется столько раз, сколько оно помещается в области фона, не обрезаясь, изображения расположены на равном расстоянии друг от друга. Первое и последнее изображения касаются краев области. Если область рисования фона больше, чем область позиционирования фона, шаблон повторяется, чтобы заполнить область рисования фона. Если недостаточно места для двух копий изображения, то размещается только одно изображение, а свойство background-position определяет его положение. Вычисляется в space space.
• round - Изображение повторяется так часто, чтобы заполнить область фона, масштабируясь и не обрезаясь. Вычисляется в round round.
• no-repeat - Изображение размещается один раз и не повторяется. Вычисляется в no-repeat no-repeat.
• initial - Устанавливает значение свойства в значение по умолчанию.
• inherit - Наследует значение свойства от родительского элемента.

Синтаксис

CSS

background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
​​​​​​​background-repeat: space;
​​​​​​​background-repeat: round;
​​​​​​​background-repeat: no-repeat;
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;
background-repeat: inherit;
background-repeat: initial;

Продолжение в следующей статье!