Пример 1
Повторение фонового изображения только вертикально:<html>
<head>
<meta charset="utf-8" />
<style>
body
{
background-image:url('/tryit/css/img/paper.gif');
background-repeat:repeat-y;
}
</style>
</head>
<body>
<p>repeat-y повторяет фоновое изображение только вертикально.</p>
</body>
</html>
Определение и использование
Свойство background-repeat устанавливает если/как фоновое изображение будет повторено.
По умолчанию, фоновое изображение повторяется как вертикально, так и горизонтально.
| Значение по умолчанию: | repeat |
|---|---|
| Унаследованный: | нет |
| Версия: | CSS1 |
| Синтакс JavaScript: | object.style.backgroundRepeat="repeat-y" |
Поддержка браузеров
Свойство background-repeat поддерживается во всех ведущих браузерах.
Примечание: Ни одна из версий Internet Explorer (включая IE8) не поддерживает значение свойства "inherit".
Советы и примечания
Совет: Фоновое изображение распологается в соответствии со свойством background-position. Если позиция фона указана, изображение будет всегда расположено в верхнем левом углу элемента.
Значения свойства
| Значение | Описание |
|---|---|
| repeat | Фоновое изображение повторяется как вертикально так и горизонтально. Это по умолчанию |
| repeat-x | Фоновое изображение повторяется только горизонтально |
| repeat-y | Фоновое изображение повторяется только вертикально |
| no-repeat | Фоновое изображение не повторяется |
| inherit | Указывает, что настройка свойства background-repeat должна быть унаследованна из родительского элемента |
Еще примеры
Пример 2
Этот пример демонстрирует, как повторять фоновое изображение по вертикали и горизонтали:<html>
<head>
<meta charset="utf-8" />
<style>
body
{
background-image:url('/tryit/css/img/paper.gif');
}
</style>
</head>
<body>
<p>По умолчанию, фоновое изображение повторяется как вертикально, так и горизонтально.</p>
</body>
</html>
Пример 3
Этот пример демонстрирует, как повторять фоновое изображение только по горизонтали.<html>
<head>
<meta charset="utf-8" />
<style>
body
{
background-image:url('/tryit/css/img/paper.gif');
background-repeat:repeat-x;
}
</style>
</head>
<body>
<p>repeat-x повторяет фоновое изображение только по горизонтали.</p>
</body>
</html>
Пример 4
В этом примере показано, как отобразить фоновое изображение только один раз, c no-repeat.<html>
<head>
<meta charset="utf-8" />
<style>
body
{
background-image:url('/tryit/css/img/paper.gif');
background-repeat:no-repeat;
}
</style>
</head>
<body>
<p>no-repeat не повторяет фоновое изображение. Изображение будет показано только один раз.</p>
</body>
</html>
Была ли эта информация полезной?
