CSS :: Свойство background-repeat
css-свойство background-repeat (от англ. background repeat – повторение фона) определяет, как будет повторяться фоновое изображение по вертикали и горизонтали до заполнения выделенной под фон области элемента.
Характеристики
- Значение по умолчанию: repeat.
- Применяется: ко всем элементам.
- Наследуется: нет.
- Анимируется: нет.
- JavaScript: object.style.backgroundRepeat="value".
Синтаксис
background-repeat: <повторение>[ , <повторение> ]*, где
<повторение> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}.
Значения
- repeat – используется браузером по умолчанию, повторяя изображение по вертикали и горизонтали.
- repeat-x – изображение повторяется только по горизонтали.
- repeat-y – изображение повторяется только по вертикали.
- no-repeat – изображение не повторяется.
- space – изображение повторяется таким образом, чтобы полностью заполнить область; если же это не удаётся, между картинками добавляется пустое пространство.
- round – изображение повторяется таким образом, чтобы в области поместилось целое число рисунков; если же это не удаётся, фоновые рисунки масштабируются.
Допустимо указывать через пробел сразу два значения: первое ключевое слово задаёт повторение по горизонтали, второе – по вертикали. При этом ключевыми словами не должны быть repeat-x или же repeat-y.
Разрешается указывать через запятую несколько параметров в случае использования более одного фонового изображения.
Ссылки
Официальный сайт W3C: https://www.w3.org/TR/css-backgrounds-3/#the-background-repeat
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/background-repeat
Примеры
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> p{ padding: 3em; width: 300px; min-height: 40px; border: dashed green 12px; background-color: yellow; background-image: url("images/cabinet.png"); } /* Задаем х и у */ .background_1{ background-repeat: repeat-x; } .background_2{ background-repeat: no-repeat space; } .background_3{ background-repeat: round no-repeat; } </style> </head> <body> <p class="background_1"> background-repeat: repeat-x </p> <p class="background_2"> background-repeat: no-repeat space </p> <p class="background_3"> background-repeat: round no-repeat </p> </body> </html>
Пример №1