Клавиша / esc

background-repeat

При помощи этого свойства и небольшой картинки можно создавать красивые паттерны на фоне.

Время чтения: меньше 5 мин

Кратко

Скопировано

Свойство background-repeat управляет повтором фонового изображения. По умолчанию значение этого свойства — repeat, то есть фоновая картинка будет повторяться по вертикали и по горизонтали.

Пример

Скопировано
        
          
          <div class="element"></div>
          <div class="element"></div>

        
        
          
        
      
        
          
          .element {  height: 100vh;  background-image: url(images/pattern.png);  background-size: 64px auto;}
          .element {
  height: 100vh;
  background-image: url(images/pattern.png);
  background-size: 64px auto;
}

        
        
          
        
      
Открыть демо в новой вкладке

Получился красивый паттерн. Изображение повторяется по горизонтали и по вертикали.

Изменим значение на repeat-x:

        
          
          .element {  background-repeat: repeat-x;}
          .element {
  background-repeat: repeat-x;
}

        
        
          
        
      
Открыть демо в новой вкладке

Теперь картинка повторяется только по горизонтали. Аналогично можно повторить картинку по вертикали при помощи значения repeat-y.

Но чаще всего в работе встречается значение no-repeat. С таким значением фоновая картинка не будет повторяться ни по горизонтали, ни по вертикали.

Как пишется

Скопировано

В качестве значения для свойства background-repeat используются следующие ключевые слова:

  • no-repeat — фоновое изображение не повторяется, остаётся только одно внутри элемента.
  • repeat — изображение повторяется и по горизонтали, и по вертикали до тех пор, пока не заполнит всю площадь элемента (значение по умолчанию).
  • repeat-x — фон повторяется по горизонтали.
  • repeat-y — фон повторяется по вертикали.
  • space — изображение повторяется до тех пор, пока не заполнит весь элемент. При этом, если по размерам не удаётся повторить изображение без обрезки, то между картинками добавляется равное пространство. Крайне редко требуется в работе.
  • round — изображение повторяется так, чтобы заполнить весь элемент. Но картинка не обрезается, повторяется целое количество раз. Если это не удаётся, то картинка масштабируется. Крайне редко требуется в работе.

Ключевые слова repeat и no-repeat можно комбинировать, чтобы управлять повторениями по горизонтали (первое значение) и по вертикали (второе значение). Но проще указывать специальные ключевые слова repeat-x и repeat-y.

Подсказки

Скопировано

💡 Свойство не наследуется.

💡 Значение по умолчанию — repeat.

💡 Чаще всего для полноэкранных фонов указывается значение no-repeat.

💡 Свойство background-repeat нельзя анимировать 😒

На практике

Скопировано

Алёна Батицкая советует

Скопировано

background-repeat — свойство простое. Написано повторять — повторяем фон. Написано не повторять — не повторяем.

🛠 С помощью повторения фона и линейного градиента (linear-gradient) можно создавать полосатые фоны.

        
          
          <div class="element"></div>
          <div class="element"></div>

        
        
          
        
      
        
          
          .element {  height: 100vh;  background-image: linear-gradient(    #49a16c 50px,    #064236 0  );  background-size: 100% 100px;  background-repeat: repeat-y;}
          .element {
  height: 100vh;
  background-image: linear-gradient(
    #49a16c 50px,
    #064236 0
  );
  background-size: 100% 100px;
  background-repeat: repeat-y;
}

        
        
          
        
      
Открыть демо в новой вкладке