Свойство background-repeat определяет направление, в котором фоновое изображение, заданное свойством background-image, будет повторяться.
Это свойство применимо ко всем элементам.
Значение свойства background-repeat
- repeat-x – изображение повторяется по горизонтали,
- repeat-y - изображение повторяется по вертикали,
- no-repeat – изображение не повторяется,
- repeat - изображение повторяется и по вертикали и по горизонтали,
- inherit - принимает значение свойства родительского элемента.
Значение по умолчанию
- repeat
Пример
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Свойство background-repeate </title>
<style type="text/css">
body{background-image:url(img/peng_64.gif); background-repeat:no-repeat;
background-position:top}
h1{background-image:url(img/peng_32.gif); background-repeat:repeat-y}
</style>
</head>
<body>
<p> Фоновое изображение страницы не повторяется. Единственный пингвин в центре. </p>
<h1> Фоновое изображение для заголовка первого уровня повторяется по вертикали </h1>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title> Свойство background-repeate </title>
<style type="text/css">
body{background-image:url(img/peng_64.gif); background-repeat:no-repeat;
background-position:top}
h1{background-image:url(img/peng_32.gif); background-repeat:repeat-y}
</style>
</head>
<body>
<p> Фоновое изображение страницы не повторяется. Единственный пингвин в центре. </p>
<h1> Фоновое изображение для заголовка первого уровня повторяется по вертикали </h1>
</body>
</html>
Результат
