background-repeat
| CSS | Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | ||
| 2.1 | 6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 2.1+ | 1.0+ | |
| 3 | 9.0+ | 1.0+ | 10.5+ | 11.0+ | 1.3+ | 3.6+ | 2.1+ | 1.0+ | |
Краткая информация
Версии CSS
Описание
Определяет, как будет повторяться фоновое изображение, установленное с помощью свойства background-image. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны. В CSS3 допустимо указывать несколько значений для каждого фона, перечисляя значения через запятую.
Синтаксис
= repeat-x | repeat-y | [repeat | space | round | no-repeat]
Допустимо указывать два значения, первое ключевое слово задаёт повторение по горизонтали, второе по вертикали.
Значения
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Повторение фона по горизонтали
Сама фоновая картинка приведена на рис. 2.
Рис. 2. Фон для блока
HTML5 CSS3 IE Cr Op Sa Fx
Объектная модель
[window.]document.getElementById(» elementID «).style.backgroundRepeat
Браузеры
Значения round и space поддерживаются только в IE9 и Opera 11.0.
Background-repeat: повторение фоновой картинки
И установим его в качестве фона для блока div :
Изображение дублируется по вертикали и горизонтали
В результате фон продублировался по горизонтальной и вертикальной оси, на всю ширину и высоту нашего блока (отметим, что размеры блока div мы указали заранее).
Свойство background-repeat
Свойство background-repeat предназначено для управления повтором фона, заданного через background-image. Принимает оно следующие значения:
no-repeat — заполняет элемент фоновым рисунком один раз. Размер фона остается натуральным (не сужается и не растягивается). Свойство с данным значением очень часто применяется на практике (мы рассмотрим это далее в книге).
repeat-x — фон повторяется только по горизонтали (оси x), до полного заполнения элемента по ширине. Удобно использовать для оформления элементов интерфейса (графическая полоска вдоль шапки сайта и т. п.).
repeat-y — фон повторяется только по вертикали (оси y), до полного заполнения элемента по высоте. Удобно использовать для оформления элементов интерфейса (графическая полоска по высоте сайдбара и т. п.).
Эти значения поддерживаются всеми браузерами, включая IE6. Существует еще два значения, которые работают только в современных версиях браузеров (IE10+, Edge 12+, Firefox 49+, Chrome 32+, Safari 7+, Opera 19+):
round — фон повторяется так, чтобы в область элемента поместилось целое число изображений. Если это не удается сделать, фон автоматически подгоняется (масштабируется), чтобы соответствовать условию.
space — работает так же, как и предыдущее свойство, но с одним отличием: если целое число изображений не помещается в область, рисунки не масштабируются, а между ними добавляется пространство.
Итак, вы уже знаете, как добавлять фон к элементу, а также как управлять его повторением. В следующем уроке вы познакомитесь с еще одним полезным свойством — background-position.
background-repeat
| CSS | Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | ||
| 2.1 | 6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 2.1+ | 1.0+ | |
| 3 | 9.0+ | 1.0+ | 10.5+ | 11.0+ | 1.3+ | 3.6+ | 2.1+ | 1.0+ | |
Краткая информация
Версии CSS
Описание
Определяет, как будет повторяться фоновое изображение, установленное с помощью свойства background-image. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны. В CSS3 допустимо указывать несколько значений для каждого фона, перечисляя значения через запятую.
Синтаксис
= repeat-x | repeat-y | [repeat | space | round | no-repeat]
Допустимо указывать два значения, первое ключевое слово задаёт повторение по горизонтали, второе по вертикали.
Значения
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Повторение фона по горизонтали
Сама фоновая картинка приведена на рис. 2.
Рис. 2. Фон для блока
HTML5 CSS3 IE Cr Op Sa Fx
Объектная модель
[window.]document.getElementById(» elementID «).style.backgroundRepeat
Браузеры
Значения round и space поддерживаются только в IE9 и Opera 11.0.
Управление фоном элемента. Свойства группы background
Для того чтобы страница сайта была красивой, с ней, как правило, необходимо поработать с точки зрения оформления фона. Для управления фоном на html-странице существует достаточно приличное количество свойств, о которых мы сейчас и поговорим.
Свойство background-color
Для указания цвета может быть использовано 16-ричное значение в виде 3-х или 6 цифр, rgb(), rgba(), hsl(), hsla() или название цвета. В коде приведены разнообразные варианты записи красного цвета, в том числе и с полупрозрачностью:
Вы можете сами посмотреть, как применяется это свойство с разными значениями цвета, причем не только красного.
Также используется значение transparent (для прозрачного фона). Кстати именно transparent является значением по умолчанию для всех элементов.
Также вы можете подобрать цвет фона в системе rgb с помощью примера от Dev Loop
Свойство background-image
Для вставки фонового изображения используйте правило background-image :
Для того чтобы убрать изображение необходимо использовать значение none:
Для фоновых изображений используют обычно файлы в формате JPG, PNG, SVG или GIF. Еще одним редко используемым форматом является APNG, т.е. Animated (анимированный) PNG, просто потому, что изображений в таком формате еще очень мало и они поддерживаются далеко не всеми браузерами (инфо на caniuse.com). Также в сети все больше появляется файлов в формате WEBP, предложенном Google в 2010 году и имеющем пока частичную поддержку браузерами (caniuse.com). Этот формат можно получить с помощью конвертера.
Посмотрите на примере на фоновые изображения в разных форматах:
Свойство background-repeat
Свойство background-position
Свойство background-repeat
Синтаксис
Описание
Свойство background-repeat (от англ. «background repeat» ‒ «повторение фона») определяет принцип повторения фонового изображения элемента, т.е. будет ли фоновое изображение повторяться и каким образом.
| Применяется: | ко всем элементам; |
|---|---|
| Наследование: | отсутствует; |
| Проценты: | Н/Д ; |
| Медиа : | визуальные. |
Условия использования
Начиная с CSS3 (через запятую) можно указать принцип повторения для каждого фонового изображения элемента.
JavaScript
Поддержка браузерами
Спецификация
Значения
В качестве единственного ключевого слова: вычисляется как no-repeat no-repeat (x: «no-repeat»; y: «no-repeat»;).
В качестве единственного ключевого слова: вычисляется как repeat repeat (x: «repeat»; y: «repeat»;).
В качестве единственного ключевого слова: вычисляется как repeat no-repeat (x: «repeat»; y: «no-repeat»;).
В качестве единственного ключевого слова: вычисляется как no-repeat repeat (x: «no-repeat»; y: «repeat»;).
round Изображение повторяется целое количество раз (т.е., чтобы крайнее изображение не было обрезано) и при этом все копии изображений равномерно масштабируются в определённом направлении («x» или «y») так, чтобы в этом направлении не оставалось пустого/прозрачного пространства.
В качестве единственного ключевого слова: вычисляется как round round (x: «round»; y: «round»;).
space Изображение повторяется целое количество раз (т.е., чтобы крайнее изображение не было обрезано) и при этом копии этого изображения распределяются (по ширине области позиционирования фона) так, чтобы первое и последнее изображение касалось краёв области позиционирования (в результате чего между копиями изображений могут возникать равные пустые/прозрачные пространства). Если в область позиционирования фона в одном направлении вмещается только одна копия изображения, то в этом направлении выводится только одна копия изображения.
В качестве единственного ключевого слова: вычисляется как space space (x: «space»; y: «space»;).
inherit Указывает, что элемент должен унаследовать параметры родительского элемента.
