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

Свойство background-repeat определяет, как будет повторяться фоновое изображение. При значении по умолчанию background-repeat повторяется по горизонтали и по вертикали. Если установлено значение "repeat-x", изображение будет повторяться только по горизонтали. Если установлено значение "repeat-y", изображение будет повторяться только по вертикали. Есть еще две значения: "space" и "round". При значении "Space" изображение будет повторяться без обрезки, а при значении "round" изображение будет повторяться, не оставляя пустые пространства.

Свойство background-repeat нужно использовать вместе со свойствами background-image и background-position.

По умолчанию изображение будет отображено в левом верхнем углу без свойства background-position.
Значение по умолчанию repeat
Применяется Ко всем элементам, а также к ::first-letter и ::first-line.
Наследуется Нет
Анимируемое Нет
Версия CSS1
DOM Syntax object.style.backgroundRepeat = "repeat-x";

Синтаксис

background-repeat: repeat | repeat-x | repeat-y | no-repeat | space | round | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      body {
      background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
      background-repeat: repeat;
      }
    </style>
  </head>
  <body>
    <h2>Например, какой-либо заголовок.</h2>
    <p>Например, какой-либо параграф.</p>
  </body>
</html>

В следующем примере background-image не повторяется:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      body {
      background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
      background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <h2>Например, какой-либо заголовок.</h2>
    <p>Например, какой-либо параграф.</p>
  </body>
</html>

Пример, где применено значение "repeat-x". При этом значении background-image повторяется только по горизонтали:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      body {
      background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
      background-repeat: repeat-x;
      }
    </style>
  </head>
  <body>
    <h2>Например, какой-либо заголовок.</h2>
    <p>Например, какой-либо параграф.</p>
  </body>
</html>

Рассмотрим пример со значением "repeat-y". В этом случае изображение повторяется только по вертикали:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      body {
      background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
      background-repeat: repeat-y;
      }
    </style>
  </head>
  <body>
    <h2>Например, какой-либо заголовок.</h2>
    <p>Например, какой-либо параграф.</p>
  </body>
</html>

Пример, где применено значение "space". Изображение будет повторяться без обрезки:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      body {
      background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
      background-repeat: space;
      }
    </style>
  </head>
  <body>
    <h2>Например, какой-либо заголовок.</h2>
    <p>Например, какой-либо параграф.</p>
  </body>
</html>

Пример со значением "round". Изображение повторяется, не оставляя пустые пространства:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      body {
      background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
      background-repeat: round;
      }
    </style>
  </head>
  <body>
    <h2>Например, какой-либо заголовок.</h2>
    <p>Например, какой-либо параграф.</p>
  </body>
</html>

Значения

Значение Описание
repeat Фоновое изображение повторяется по горизонтали и по вертикали. Значение по умолчанию.
repeat-x Фоновое изображение повторяется только по горизонтали.
repeat-y Фоновое изображение повторяется только по вертикали.
no-repeat Фоновое изображение не повторяется.
space Фоновое изображение повторяется без обрезки.
round Фоновое изображение повторяется, не оставляя пустые пространства.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

Поддержка браузера

1.0+ 12.0+ 1.0+ 1.0+ 3.5+


Считаете ли это полезным?

Похожие статьи