Фон-произход - CSS-трикове

В background-originимота определя къде да рисувам на заден план: в целия елемент, във вътрешността на границата, или вътре в пълнежа.

Има четири стойности: border-box, padding-box, content-boxи inherit. Ето демонстрация:

Вижте Демото за произход на фона на писалката от Тимъти Милър (@tjacobdesign) на CodePen.

background-origin е подобен на background-clip, освен че преоразмерява фона, вместо да го изрязва.

Горният пример има background-size: coverи background-repeat: no-repeatсъщо се прилага. Ако случаят не беше такъв, изображението щеше да се повтори под контура или подложката.