background-originで背景画像の基準位置を指定【CSS】

background-originは背景画像をボックスに表示する基準位置を指定するプロパティです。

背景画像はbackground-imageプロパティで指定できます。

関連記事
『background-imageで背景画像を指定する【CSS】』

background-originの値の指定方法

background-originプロパティでは以下のような値を指定して基準位置を決めます。

ちなみにbackground-attachmentプロパティの値がfixedの場合、background-originプロパティの指定は無効になります。

border-box

border-boxを指定すると、ボーダーを含めた要素の端が基準になります。

padding-box

padding-boxを指定すると、ボーダーを除く、要素の内側の領域が基準になります。

content-box

content-boxを指定すると、ボックス内の余白を含まない、要素のコンテンツの領域が基準になります。