- background-repeat
- Интерактивный пример
- Синтаксис
- Значения
- Примеры
- HTML
- CSS
- Результат
- Спецификация
- Поддержка браузеров
- Смотрите также
- Found a content problem with this page?
- MDN
- Support
- Our communities
- Developers
- background-repeat
- Синтаксис
- Значения
- Объектная модель
- Браузеры
- CSS по теме
- background-repeat
- Синтаксис
- Значения
- Объектная модель
- Браузеры
- CSS по теме
- background-repeat¶
- Демо¶
- Синтаксис¶
- Значения¶
- Спецификации¶
- Поддержка браузерами¶
- Описание и примеры¶
- Пример 1¶
- Пример 2¶
- CSS Background Image Repeat
- Example
- Example
- CSS background-repeat: no-repeat
- Example
- CSS background-position
- Example
- The CSS Background Repeat and Position Properties
background-repeat
Свойство background-repeat устанавливает, как фоновые изображения будет повторяться. Они могут повторяться по горизонтальной и вертикальной оси или не повторяться вовсе.
Интерактивный пример
Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на извлечение.
По умолчанию, изображения обрезаются по размеру элемента, но их можно масштабировать (используя round ) или равномерно растянуть от конца к концу (используя space ).
Синтаксис
/*Ключевые значения*/ 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; background-repeat: unset;
Значения
-
-
: Следующие однозначные имеют двухзначные эквиваленты: repeat-x тоже самое, что и repeat no-repeat repeat-y тоже самое, что и no-repeat repeat repeat тоже самое, что и repeat repeat space тоже самое, что и space space round тоже самое, что и round round no-repeat тоже самое, что и no-repeat no-repeat В двухзначном синтаксисе первое означает горизонтальные повторения, а второе вертикальные. repeat Изображения повторяются столько, сколько необходимо, чтобы полностью покрыть область элемента, последнее обрезается, если не хватает места. space Изображение повторяется в заданном направлении столько раз, сколько необходимо, чтобы покрыть большую часть области рисования фонового изображения, не обрезая изображение. Оставшееся незакрытое пространство равномерно распределено между изображениями. Первое и последнее изображения касаются края элемента. Значение CSS-свойства background-position игнорируется для рассматриваемого направления, за исключением случаев, когда отдельное изображение больше области рисования фонового изображения, что является единственным случаем, когда изображение может быть обрезано, когда используется значение space . round Изображение повторяется в заданном направлении столько раз, сколько необходимо, чтобы покрыть большую часть области рисования фонового изображения, не обрезая изображение. Если оно не покрывает точно область, плитки изменяются в этом направлении, чтобы соответствовать ей. no-repeat Изображение не повторяется (и, следовательно, область рисования фонового изображения не обязательно будет полностью покрыта). Расположение неповторяющегося фонового изображения определяется CSS-свойством background-position .
Примеры
HTML
ol> li>no-repeat div class="one"> div> li> li>repeat div class="two"> div> li> li>repeat-x div class="three"> div> li> li>repeat-y div class="four"> div> li> li>repeat-x, repeat-y (multiple images) div class="five"> div> li> ol>
CSS
/* Совместно для всех DIVS в примере */ li margin-bottom: 12px;> div background-image: url(starsolid.gif); width: 144px; height: 84px; > /* повторение фона CSS */ .one background-repeat: no-repeat; > .two background-repeat: repeat; > .three background-repeat: repeat-x; > .four background-repeat: repeat-y; > /* Несколько изображений */ .five background-image: url(starsolid.gif), url(https://developer.mozilla.org/static/img/favicon32.png); background-repeat: repeat-x, repeat-y; height: 144px; >
Результат
В этом примере каждому элементу списка соответствует другое значение background-repeat .
Спецификация
Начальное значение repeat Применяется к все элементы. Это также применяется к ::first-letter и ::first-line . Наследуется нет Обработка значения список, каждый элемент которого содержит 2 ключевых слова, по одному на размер Animation type discrete Поддержка браузеров
BCD tables only load in the browser
Смотрите также
Found a content problem with this page?
This page was last modified on 22 февр. 2023 г. by MDN contributors.
Your blueprint for a better internet.
MDN
Support
Our communities
Developers
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.background-repeat
Определяет, как будет повторяться фоновое изображение, установленное с помощью свойства background-image. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны. В CSS3 допустимо указывать несколько значений для каждого фона, перечисляя значения через запятую.
Синтаксис
background-repeat: no-repeat | repeat | repeat-x | repeat-y | inherit
= repeat-x | repeat-y | [repeat | space | round | no-repeat]
Допустимо указывать два значения, первое ключевое слово задаёт повторение по горизонтали, второе по вертикали.
Значения
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.
Рис. 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-image. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны. В CSS3 допустимо указывать несколько значений для каждого фона, перечисляя значения через запятую.
Синтаксис
background-repeat: no-repeat | repeat | repeat-x | repeat-y | inherit
= repeat-x | repeat-y | [repeat | space | round | no-repeat]
Допустимо указывать два значения, первое ключевое слово задаёт повторение по горизонтали, второе по вертикали.
Значения
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.
Рис. 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>
CSS Background Image Repeat
By default, the background-image property repeats an image both horizontally and vertically.
Some images should be repeated only horizontally or vertically, or they will look strange, like this:
Example
If the image above is repeated only horizontally ( background-repeat: repeat-x; ), the background will look better:
Example
Tip: To repeat an image vertically, set background-repeat: repeat-y;
CSS background-repeat: no-repeat
Showing the background image only once is also specified by the background-repeat property:
Example
Show the background image only once:
In the example above, the background image is placed in the same place as the text. We want to change the position of the image, so that it does not disturb the text too much.
CSS background-position
The background-position property is used to specify the position of the background image.
Example
Position the background image in the top-right corner:
body <
background-image: url(«img_tree.png»);
background-repeat: no-repeat;
background-position: right top;
>The CSS Background Repeat and Position Properties
Property Description background-position Sets the starting position of a background image background-repeat Sets how a background image will be repeated -