Часто, когда мы задаем html элементу фоновую картинку необходимо сделать отступ от границ блока, чтобы предать блоку более эстетичный вид. Обычно это делается с помощью свойства background-position, например так:

Результат: В этом примере можно заметить, что отступ фонового изображения от границ блока равен 20px, что совпадает с внутренним отступом (padding) самого блока. Соответственно, если в будущем мы решим изменить внутренний отступ блока, нам также придется скорректировать и отступ фонового изображения, таким образом правки придется вносить сразу в 3 местах, что не очень удобно и чревато ошибками. Свойство background-origin позволит нам избежать повторения. background-origin имеет значение по-умолчанию padding-box, это значит что фоновая картинка размещается на внешней границе внутреннего отступа(padding):   Если мы переопределим значение свойства на content-box, то фоновая картинка будет находится не на внешней стороне границ padding, а упадет на уровень содержимого:   В нашем первоначальном примере уберем правило background-position и вместо него добавим background-origin: content-box, также немного изменим свойство background: Результат:   Конечно же код не стал короче, но он стал логичнее, пропала необходимость делать изменения в нескольких местах, а это крайне важное свойство в больших проектах 🙂