Характеристики свойства
В каких браузерах работает?
CSS | |||||||
2.1 | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 2.1+ | 1.0+ |
3 | 9.0+ | 1.0+ | 11.0+ | 1.3+ | 3.6+ | 2.1+ | 1.0+ |
В каких версиях CSS используется?
CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
+ | + | + | + |
Для чего используется?
Контролирует, как именно будет повторятся фон, указанный в свойстве background-image. Существует три возможных процесса зацикливания картинки: по оси абцис (горизонталь), по оси ординат (вертикаль) или в оба направления. Допускается указывать для нескольких картинок одновременно.
Как правильно задавать?
background-repeat: значение;
Какие могут быть значения?
- no-repeat - отменяет повторение.
- repeat - повтор производится во всех направлениях.
- repeat-x - повторение фона по оси абсцисс.
- repeat-y - повторение фона по оси ординат.
- inherit - повторяет родительский элемент.
- space - повтор продолжается до тех пор, пока заданная зона не будет полностью заполнена. Если такой вариант не возможен, то добавляется отступы между частями фона.
- round - повтор продолжается до тех пор, пока заданная зона не будет полностью заполнена. Если такой вариант не возможен, то картинки подгоняются под нужные габариты.
Пример использования
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Свойство background-repeat</title> <style type="text/css"> body { background-image: url(city.jpg) ; background-repeat:no-repeat; background-size: 400px; color: #eee; background-origin: padding-box; } p { margin-top:65px; } </style> </head> <body> <p>Текст для примера, который подчеркнет специфику использование фонового рисунка</p> </body> </html>
Тип CSS свойства:
Цвет и фон