background-repeat

Свойство 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 нельзя анимировать 😒

        
          
          <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;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать