Origin有“起源”的意思，而background-origin就有“背景图片起点”的意思。它是告诉浏览器background-position是相对于哪里定位的。
background-origin的值有：
border-box
padding-box（默认值）
content-box
关于这三个属性的的解释，首先让我们先来熟悉一哈盒模型吧！！！
在CSS中，元素被看成一盒子。这个盒子被分解成三个部分，即border-box部分、padding-box部分和content-box部分。
在这个互联网电商时代，相信大家都在网上买过商品吧。当我们欣然的接过快递小哥送来的包裹时，就会迫不及待的打开包裹，首先我们会打开包装，这个包装就是border-box区域。如果我们买的东西是易碎品，那么我们会看到包裹内的防压泡沫板，这个就是padding-box区域，而在最里边的我们的心爱之物就是content-box区域。
在CSS中，border-box区域的大小是由border属性控制的，padding-box区域的大小是由padding属性控制的，content-box区域的大小是由实际内容区域大小控制的。
现在让我们回到background-origin这个属性上来，它的三个值就好理解了。在CSS中页面的渲染性格是由页面左上角开始的，那么
border-box就是把背景图片的坐标原点设置在盒模型border-box区域的左上角
padding-box就是把背景图片的坐标原点设置在盒模型padding-box区域的左上角
content-box就是把背景图片的坐标原点设置在盒模型content-box区域的左上角
备注：当background-attachment属性设置为fixed时，background-origin属性会失效。
原文链接：https://blog.csdn.net/weixin_39256994/article/details/78698145
