background-repeat

Определяет, как будет повторяться фоновое изображение, установленное с помощью свойства background-image. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны. В CSS3 допустимо указывать несколько значений для каждого фона, перечисляя значения через запятую.

Синтаксис

background-repeat: no-repeat | repeat | repeat-x | repeat-y | inherit

Допустимо указывать два значения, первое ключевое слово задаёт повторение по горизонтали, второе по вертикали.

Значения

no-repeat Устанавливает одно фоновое изображение в элементе без его повторений, положение которого определяется свойством background-position (по умолчанию в левом верхнем углу). Аналогично no-repeat no-repeat . repeat Фоновое изображение повторяется по горизонтали и вертикали. Аналогично repeat repeat . repeat-x Фоновый рисунок повторяется только по горизонтали. Аналогично repeat no-repeat . repeat-y Фоновый рисунок повторяется только по вертикали. Аналогично no-repeat repeat . inherit Наследует значение родителя. space Изображение повторяется столько раз, чтобы полностью заполнить область; если это не удаётся, между картинками добавляется пустое пространство. round Изображение повторяется так, чтобы в области поместилось целое число рисунков; если это не удаётся сделать, то фоновые рисунки масштабируются.

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

       Даже опытному верстальщику приходится иногда смотреть свой код на наличие опечаток и ошибок. Так что не брезгуй проверять код валидатором, это поможет избежать множества ляпов в будущем.

Результат данного примера показан на рис. 1.

Читайте также: Задать стиль css блока

Рис. 1. Повторение фона по горизонтали

Сама фоновая картинка приведена на рис. 2.

HTML5 CSS3 IE Cr Op Sa Fx

Объектная модель

[window.]document.getElementById(» elementID «).style.backgroundRepeat

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

Значения round и space поддерживаются только в IE9 и Opera 11.0.

CSS по теме

Источник

background-repeat

Синтаксис

background-repeat: no-repeat | repeat | repeat-x | repeat-y | inherit

Значения

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

       Даже опытному верстальщику приходится иногда смотреть свой код на наличие опечаток и ошибок. Так что не брезгуй проверять код валидатором, это поможет избежать множества ляпов в будущем.

Результат данного примера показан на рис. 1.

Рис. 1. Повторение фона по горизонтали

Сама фоновая картинка приведена на рис. 2.

HTML5 CSS3 IE Cr Op Sa Fx

Объектная модель

[window.]document.getElementById(» elementID «).style.backgroundRepeat

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

Значения round и space поддерживаются только в IE9 и Opera 11.0.

CSS по теме

Источник

background-repeat¶

Свойство background-repeat определяет, как будет повторяться фоновое изображение, установленное с помощью свойства background-image .

Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны. Допустимо указывать несколько значений для каждого фона, перечисляя значения через запятую.

Демо¶

background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-position-x
background-position-y
background-repeat
background-size

Синтаксис¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

/* One-value syntax */ background-repeat: repeat-x; background-repeat: repeat-y; background-repeat: repeat; background-repeat: space; background-repeat: round; background-repeat: no-repeat; /* Two-value syntax: horizontal | vertical */ background-repeat: repeat space; background-repeat: repeat repeat; background-repeat: round space; background-repeat: no-repeat round; /* Global values */ background-repeat: inherit; background-repeat: initial; background-repeat: unset;

Значения¶

no-repeat Устанавливает одно фоновое изображение в элементе без его повторений, положение которого определяется свойством background-position (по умолчанию в левом верхнем углу). Аналогично no-repeat no-repeat . repeat Фоновое изображение повторяется по горизонтали и вертикали. Аналогично repeat repeat . repeat-x Фоновый рисунок повторяется только по горизонтали. Аналогично repeat no-repeat . repeat-y Фоновый рисунок повторяется только по вертикали. Аналогично no-repeat repeat . space Изображение повторяется столько раз, чтобы полностью заполнить область; если это не удаётся, между картинками добавляется пустое пространство. round Изображение повторяется так, чтобы в области поместилось целое число рисунков; если это не удаётся сделать, то фоновые рисунки масштабируются.

Применяется ко всем элементам

Спецификации¶

Поддержка браузерами¶

Can I Use background-repeat-round-space? Data on support for the background-repeat-round-space feature across the major browsers from caniuse.com.

Описание и примеры¶

Пример 1¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

 html> head> meta charset="utf-8" /> title>background-repeattitle> style> body  background-image: url('/example/image/bg_grey.png'); /* Путь к фоновому рисунку */ background-position: left bottom; /* Положение фона */ background-repeat: repeat-x; /* Повторяем фон по горизонтали */ > style> head> body> p> Даже опытному верстальщику приходится иногда смотреть свой код на наличие опечаток и ошибок. Так что не брезгуй проверять код валидатором, это поможет избежать множества ляпов в будущем. p> body> html>

Пример 2¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

 html> head> meta charset="utf-8" /> title>background-repeattitle> style> body  background-image: url('/example/image/pattern-left.png'), url('/example/image/pattern-right.png'); background-position: left, right; background-repeat: repeat-y, repeat-y; > style> head> body> div style="height:2000px">div> body> html>

Источник

background — repeat

При помощи этого свойства и небольшой картинки можно создавать красивые паттерны на фоне.

Время чтения: меньше 5 мин

Кратко

Скопировать ссылку «Кратко» Скопировано

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

Пример

Скопировать ссылку «Пример» Скопировано

 div class="element">div>

 .element  height: 100vh; background-image: url(images/pattern.png); background-size: 64px auto;> .element  height: 100vh; background-image: url(images/pattern.png); background-size: 64px auto; >

Получился красивый паттерн. Изображение повторяется по горизонтали и по вертикали.

Изменим значение на repeat — x :

 .element  background-repeat: repeat-x;> .element  background-repeat: repeat-x; >

Теперь картинка повторяется только по горизонтали. Аналогично можно повторить картинку по вертикали при помощи значения repeat — y .

Но чаще всего в работе встречается значение no — repeat . С таким значением фоновая картинка не будет повторяться ни по горизонтали, ни по вертикали.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

В качестве значения для свойства background — repeat используются следующие ключевые слова:

no — repeat — фоновое изображение не повторяется, остаётся только одно внутри элемента.
repeat — изображение повторяется и по горизонтали, и по вертикали до тех пор, пока не заполнит всю площадь элемента (значение по умолчанию).
repeat — x — фон повторяется по горизонтали.
repeat — y — фон повторяется по вертикали.
space — изображение повторяется до тех пор, пока не заполнит весь элемент. При этом, если по размерам не удаётся повторить изображение без обрезки, то между картинками добавляется равное пространство. Крайне редко требуется в работе.
round — изображение повторяется так, чтобы заполнить весь элемент. Но картинка не обрезается, повторяется целое количество раз. Если это не удаётся, то картинка масштабируется. Крайне редко требуется в работе.

Ключевые слова repeat и no — repeat можно комбинировать, чтобы управлять повторениями по горизонтали (первое значение) и по вертикали (второе значение). Но проще указывать специальные ключевые слова repeat — x и repeat — y .

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 Значение по умолчанию — repeat .

💡 Чаще всего для полноэкранных фонов указывается значение no — repeat .

💡 Свойство background — repeat нельзя анимировать 😒

На практике

Скопировать ссылку «На практике» Скопировано

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

background — repeat — свойство простое. Написано повторять — повторяем фон. Написано не повторять — не повторяем.

🛠 С помощью повторения фона и линейного градиента ( linear — gradient ) можно создавать полосатые фоны.

 div class="element">div>

 .element  height: 100vh; background-image: linear-gradient( #49a16c 50px, #064236 0 ); background-size: 100% 100px; background-repeat: repeat-y;> .element  height: 100vh; background-image: linear-gradient( #49a16c 50px, #064236 0 ); background-size: 100% 100px; background-repeat: repeat-y; >

Источник