background-origin

Свойство background-origin определяет, откуда начинается отсчёт фона элемента — от границы (border), внутреннего отступа (padding) или содержимого (content). Это влияет на позиционирование фонового изображения или градиента.

        
          
          .element {  padding: 20px;  border: 10px dashed;  background-image: linear-gradient(#2E9AFF, #F498AD);  background-repeat: no-repeat;}
          .element {
  padding: 20px;
  border: 10px dashed;
  background-image: linear-gradient(#2E9AFF, #F498AD);
  background-repeat: no-repeat;
}

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

Доступные значения:

• padding-box — фон начинается от внутренней границы рамки, то есть с области отступа (значение по умолчанию).
• border-box — фон начинает от внешней границы блока, включая рамку.
• content-box — фон начинается от края содержимого, не затрагивая padding и border.

Можно указать несколько значений через запятую, если в свойстве background-image используется несколько изображений. Тогда порядок значений background-origin соответствует порядку фоновых изображений:

        
          
          .element {  padding: 20px;  border: 10px dashed;  background-image:    url("doka.svg"),    linear-gradient(#2E9AFF, #F498AD);  background-origin: content-box, padding-box;  background-repeat: no-repeat;}
          .element {
  padding: 20px;
  border: 10px dashed;
  background-image:
    url("doka.svg"),
    linear-gradient(#2E9AFF, #F498AD);
  background-origin: content-box, padding-box;
  background-repeat: no-repeat;
}

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

В примере выше первое изображение будет отрисовано от края содержимого, а второе — от внутреннего отступа.

Когда добавляете фоновое изображение, браузер должен знать, откуда его начинать рисовать. Именно это определяет background-origin.

Важно понимать разницу:

• background-origin не управляет тем, сколько места займет фон — этим занимается свойство background-size.
• Вместо этого оно указывает точку отсчёта — откуда именно начать отрисовку изображения внутри элемента.

Эта точка может быть:

• от внешнего края рамки (border-box),
• от внутреннего края рамки, то есть края отступа (padding-box),
• от края содержимого, исключая padding и border (content-box).

Если у элемента есть рамка или отступы, это визуально меняет положение фонового изображения, даже если его размер не меняется.

💡 Если у элемента есть заметная рамка и фон должен «пролезать» под неё — используйте border-box. Если рамка должна быть отдельно от фона — padding-box.
💡 Часто используется в паре с background-clip, чтобы управлять не только начальной точкой фона, но и областью, в которой он отображается.
💡 background-origin работает только с фоновыми изображениями и градиентами, а не с цветом фона background-color.
💡 Если для фона указано свойство background-attachment со значением fixed, то background-origin игнорируется — фон будет привязан к видимому пространству, а не к элементу.
💡 При использовании сокращённого свойства background, если вы не укажете background-origin, оно сбросится к значению по умолчанию — padding-box.