CSS background-repeat свойство

Последнее обновление 8 мая 2019 12:23:22 (UTC / GMT +8 часов)

script1adsense2code

script1adsense3code

свойство фонового повтора

Свойство CSS background repeat указывает, повторяется ли фоновое изображение (с названием) и как оно повторяется.

Синтаксис:

 повторение фона: повторение | повторить-х | повторить-у | без повтора | унаследовать

Ценности

repeat : если указано, фоновое изображение повторяется как по горизонтали, так и по вертикали.

repeat-x : если указано, фоновое изображение повторяется только по горизонтали.

repeat-y : если указано, фоновое изображение повторяется только по вертикали.

no-repeat : если указано, фоновое изображение не повторяется.

наследовать : если установлено, связанный элемент принимает вычисленное значение свойства background-repeat его родительского элемента.

Начальные значения

повторение.

Относится к

Свойство background-repeat можно применять ко всем элементам HTML.

наследование

Если значение не указано, свойство background-repeat не получает вычисленное значение своего родительского элемента.

Процентное соотношение

Недоступен.

Средства массовой информации

визуальный.

Расчетное значение

Как указано.

Совместимость браузера

браузер	Версия
Internet Explorer	4.0 и выше
Firefox (Геккон)	1.0 и выше
опера	3.5 и выше
Safari (WebKit)	1.0 и выше

Пример свойства background-repeat, когда значение = "repeat-x"

Этот пример показывает, как повторить фоновое изображение по горизонтали

Код CSS:

p {background-image: url('repeat-x.gif'); background-repeat: repeat-x}

HTML код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example of background-repeat property when value="repeat-x" | w3resource</title>
<link rel="stylesheet" type="text/css" media="screen,projection" href="example-of-background-repeat-property-when-value-repeat-x.css">
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget luctus lacus. Praesent faucibus, odio nec convallis fermentum, magna augue pharetra urna, ut laoreet augue risus bibendum tellus. Donec pretium molestie vulputate. Morbi rutrum, sem eget porta varius, nibh mauris ornare neque, eu viverra risus tellus ut erat. In risus quam, egestas vel aliquet et, vulputate ut eros. Nam hendrerit auctor tortor. Nullam ut commodo magna. Etiam tincidunt risus ut tellus malesuada eget commodo dui congue. Donec interdum tempus nunc sollicitudin molestie. Aenean auctor hendrerit volutpat. Cras rutrum pretium sapien quis suscipit. Sed faucibus tincidunt sapien ac scelerisque. Donec pulvinar interdum augue, id facilisis dui commodo id.</p>
</body>
</html>

Посмотреть этот пример в отдельном окне браузера

Пример свойства background-repeat, когда значение = "repeat-x".

Пример свойства background-repeat при значении = "repeat-y"

Этот пример показывает, как повторить фоновое изображение по вертикали

Код CSS:

p {background-image: url('repeat-y.gif'); background-repeat: repeat-y}

HTML код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example of background-repeat property when value="repeat-y" | w3resource</title>
<link rel="stylesheet" type="text/css" media="screen,projection" href="example-of-background-repeat-property-when-value-repeat-y.css">
</head>
<body>
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget luctus lacus. Praesent faucibus, odio nec convallis fermentum, magna augue pharetra urna, ut laoreet augue risus bibendum tellus. Donec pretium molestie vulputate. Morbi rutrum, sem eget porta varius, nibh mauris ornare neque, eu viverra risus tellus ut erat. In risus quam, egestas vel aliquet et, vulputate ut eros. Nam hendrerit auctor tortor. Nullam ut commodo magna. Etiam tincidunt risus ut tellus malesuada eget commodo dui congue. Donec interdum tempus nunc sollicitudin molestie. Aenean auctor hendrerit volutpat. Cras rutrum pretium sapien quis suscipit. Sed faucibus tincidunt sapien ac scelerisque. Donec pulvinar interdum augue, id facilisis dui commodo id.</span></p>
</body>
</html>

Посмотреть этот пример в отдельном окне браузера

Пример свойства background-repeat, когда значение = "repeat-y".

Пример свойства background-repeat при значении = "no-repeat"

Этот пример показывает, как остановить повторение фонового изображения

Код CSS:

body{
background-image: url(w3r.gif);
background-repeat: no-repeat;
}

HTML код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example of background-repeat property when value="no-repeat" | w3resource</title>
<link rel="stylesheet" type="text/css" media="screen,projection" href="example-of-background-repeat-property-when-value-no-repeat.css">
</head>
<body>
<h1>Learn web development</h1>
</body>
</html>

Посмотреть этот пример в отдельном окне браузера

Пример свойства background-repeat, когда значение = "no-repeat".

Смотрите также

Предыдущая: CSS свойство background-image
Далее: CSS background-position свойство