CSSリファレンス

background-originの意味と使い方

「background-origin」は背景画像を表示するときの、その基準となる位置を指定します。background-positionプロパティで背景画像の表示位置を指定する場合の基点などに利用できます。
ただし、background-attachmentプロパティの値に「fixed」が指定されている場合は、background-originプロパティでの指定は無効になります。

値の指定方法

padding-box

パディングボックスの左上を基準として、背景画像を表示します。この場合、パディングボックスの左上が「0 0」、右下が「100% 100%」となります。


border-box

ボーダーボックスの左上基準として、背景画像を表示します。この場合、ボーダーボックスの左上が「0 0」、右下が「100% 100%」となります。


content-box

コンテンツボックスの左上を基準として、背景画像を表示します。この場合、内容領域の左上が「0 0」、右下が「100% 100%」となります。


関連プロパティ

  • background-image:背景画像を指定する
  • background-position:背景画像の表示開始位置を指定する