Описание
Свойство background-repeat определяет, будет ли фоновое изображение повторяться (мозаичным), и, если оно повторяется, свойство определяет, по какой из указанных осей (x, y или обе) изображение должно повторяться.
По умолчанию background-image повторяется по вертикальной и горизонтальной осям и повторяется в обоих направлениях. Мы используем свойство background-repeat чтобы указать ось, вдоль которой должно повторяться изображение.
Когда фоновое изображение повторяется, оно сначала размещается в соответствии со свойством background-position , а затем начинает повторяться с этой точки в обоих направлениях. Например, background-image , расположенное в фоновом положении центра центра (центра элемента) и имеющее значение повторения фона, повторяется в обоих направлениях вдоль осей x и y, то есть вверх и вниз, влево и вправо, начиная с центра.
Фон элемента — это область, покрытая шириной и высотой этого элемента (независимо от того, заданы ли эти размеры явно, или содержание диктует их); это также включает область, покрытую отступами и границами. Цвет фона (или background-image), примененный к элементу, будет отображаться под содержимым переднего плана этого элемента и областью, охватываемой свойствами padding и border для элемента. Эта зона покрытия очевидна, когда элемент имеет прозрачные (или пунктирные или пунктирные) границы, а фон виден под границами (или между точками). Обратите внимание, что версии Internet Explorer вплоть до 6 включительно не поддерживают прозрачные границы.
Некоторая область рассматриваемого элемента должна быть видимой, чтобы фоновое изображение было просвечено. Если элемент не имеет внутренней высоты (определяемой его содержимым или размерами), фон не будет виден. Если элемент содержит только всплывающие дочерние элементы, которые не были очищены (см. Очистить), фон не будет отображаться, так как высота элемента будет равна нулю.
Черепица и расположение фонового изображения на встроенных элементах не определены в спецификации CSS2.1, но могут быть рассмотрены в будущих версиях.
пример
Это правило стиля заставляет повторять background-image назначенное элементу с идентификатором "example" вдоль оси x :
#example{ background-repeat: repeat-x; }
Значение
-
repeat -
Значение
repeatобеспечиваетrepeatbackground-imageв обоих направлениях (то есть влево и вправо, вверх и вниз) и вдоль обеих осей, пока фон элемента не будет полностью покрыт. -
repeat-x -
Значение
repeat-xгарантирует, чтоbackground-imageповторяется только вдоль оси x (то есть горизонтальной оси в обоих направлениях — влево и вправо), пока фон элемента не будет полностью покрыт вдоль этой оси. -
repeat-y -
Значение
repeat-yгарантирует, чтоbackground-imageбудет повторяться только вдоль оси y (то есть вертикальной оси в обоих направлениях — вверх и вниз), пока фон элемента не будет полностью покрыт вдоль этой оси. -
no-repeat -
Значение
no-repeatгарантирует, чтоbackground-imageне повторяется ни в каком направлении, и что только один экземпляр изображения будет размещен в координатах, заданныхbackground-position.
Если не задано background-position ,
изображение помещается в левую верхнюю позицию элемента по умолчанию (0,0).