5 августа буду в отъезде. отвечаю по возможности

Свойство background-repeat

Свойство background-repeat задает каким образом повторять фоновую картинку элемента. По умолчанию картинка повторяется и по оси X, и по оси Y, таким образом покрывая собой всю доступную область.

Синтаксис

селектор { background-repeat: no-repeat | repeat | repeat-x | repeat-y | space | round; }

Значения

Значение Описание
no-repeat Картинка не будет повторяться вообще.
repeat-x Картинка будет повторяться по оси X.
repeat-y Картинка будет повторяться по оси Y.
repeat Картинка будет повторяться по оси X и по оси Y.
space Картинка повторится столько раз, чтобы полностью заполнить область, если это не удается, между картинками добавляется пустое пространство.
round Картинка повторится так, чтобы в области поместилось целое число рисунков, если это не удается сделать, то фоновые рисунки масштабируются.

Значение по умолчанию: repeat - покрывает узором весь экран.

Пример

По умолчанию фоновая картинка замостит собой весь элемент:

<div id="elem"></div> #elem { background-image: url("bg.png"); width: 400px; height: 300px; border: 1px solid black; }

:

Пример

Давайте сделаем так, чтобы картинка не повторялась:

<div id="elem"></div> #elem { background-repeat: no-repeat; background-image: url("bg.png"); width: 400px; height: 300px; border: 1px solid black; }

:

Пример

А теперь пусть картинка повторяется по оси X:

<div id="elem"></div> #elem { background-repeat: repeat-x; background-image: url("bg.png"); width: 400px; height: 300px; border: 1px solid black; }

:

Пример

А теперь по оси Y:

<div id="elem"></div> #elem { background-repeat: repeat-y; background-image: url("bg.png"); width: 400px; height: 300px; border: 1px solid black; }

:

Пример

Повторяющиеся по осям картинки можно позиционировать с помощью свойства background-position:

<div id="elem"></div> #elem { background-repeat: repeat-y; background-position: top center; background-image: url("bg.png"); width: 400px; height: 300px; border: 1px solid black; }

:

Пример

Посмотрим, как работает значение space:

<div id="elem"></div> #elem { background-repeat: space; background-image: url("bg.png"); width: 400px; height: 300px; border: 1px solid black; }

:

Пример

Посмотрим, как работает значение round:

<div id="elem"></div> #elem { background-repeat: round; background-image: url("bg.png"); width: 400px; height: 300px; border: 1px solid black; }

:

Смотрите также

  • свойство background,
    представляющее собой свойство-сокращение для фона