| 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 + | |
Коротка інформація
| Значення за умовчанням | repeat |
|---|---|
| Успадковується | Ні |
| Застосовується | До всіх елементів |
| Посилання на специфікацію |
Версії CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Опис
Визначає, як буде повторюватися фонове зображення, встановлене за допомогою властивості background-image . Можна встановити повторення малюнка тільки по горизонталі, по вертикалі або в обидві сторони. В CSS3 допустимо вказувати кілька значень для кожного фону, перераховуючи значення через кому.
Синтаксис
| CSS2.1 | background-repeat: no-repeat | repeat | repeat-x | repeat-y | inherit |
| CSS3 | background -repeat: <повторення> [, <повторення> ] * |
Тут:
<повторення> =Repeat-x | repeat-y | [Repeat | space | round | no-repeat] {1,2}
Припустимо вказувати два значення, перше ключове слово задає повторення по горизонталі, друге по вертикалі.
Значення
- no-repeat
- Встановлює одне фонове зображення в елементі без його повторень, положення якого визначається властивістю background-position (за умовчанням в лівому верхньому куті). Аналогічно no-repeat no-repeat .
- repeat
- Фонове зображення повторюється по горизонталі і вертикалі. Аналогічно repeat repeat .
- repeat-x
- Шпалери повторюється тільки по горизонталі. Аналогічно repeat no-repeat .
- repeat-y
- Шпалери повторюється тільки по вертикалі. Аналогічно no-repeat repeat .
- inherit
- Успадковує значення батька.
- space
- Зображення повторюється стільки раз, щоб повністю заповнити область; якщо це не вдається, між картинками додається порожній простір.
- round
- Зображення повторюється так, щоб в області помістилося ціле число малюнків; якщо це не вдається зробити, то фонові малюнки масштабируются.
Приклад 1
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
<!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(images/bg_grey.png);
/* Шлях до фонового малюнку */
background-position: left bottom;
/* Положення фону */
background-repeat: repeat-x;
/* Повторюємо фон по горизонталі */
}
</style>
</head>
<body>
<p>
Навіть досвідченому верстальщику доводиться іноді дивитися свій код на наявність помилок і помилок. Так що не гребують перевіряти код валідатором, це допоможе уникнути безлічі ляпів в майбутньому. </p>
</body>
</html>
Результат даного прикладу показаний на рис. 1.
Сама фонова картинка приведена на рис. 2.
Приклад 2
HTML5 CSS3 IE Cr Op Sa Fx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
background-repeat </title>
<style>
body {
background-image: url(images/pattern-left.png), url(images/pattern-right.png);
background-position: left, right; background-repeat: repeat-y, repeat-y;
}
</style>
</head>
<body>
<div style="height:2000px">
</div>
</body>
</html>
Об'єктна модель
[window.] Document.getElementById (" elementID ").style.backgroundRepeat
Браузери
Internet Explorer до версії 7.0 включно не підтримує значення inherit .
Значення round і space підтримуються тільки в IE9 і Opera 11.0.