表示開始位置の指定 background-origin

画像の場合は開始位置からの繰り返し表示になります。
ここでは分かりやすいようにno-repeatにしてあります。

background-origin

borderbox

background-origin

paddingbox

background-origin

contentbox



表示領域の指定 background-clip

画像の場合は開始位置(デフォルトはoriginのborderbox)からの繰り返し表示になります。
ここでは分かりやすいようにno-repeatにしてあります。
表示領域外は背景色を指定していても白になります。

background-clip

borderbox

background-clip

paddingbox

background-clip

contentbox


background-clipは表示領域指定なので、
左上のボーダー内まで表示させる場合はoriginも一緒に指定します。

background-clip:
borderbox;

background-origin:
borderbox;



clipやoriginを使う時はどちらか片方のみでなく、両方指定することが多くなると思います。





おまけ
画像を文字で切り抜ける background-clip:text;

海響館