Title

background-originとは

background origin とは次の2つ語句からなるCSSのプロパティです。

background

読み: バックグラウンド
意味: 背景、景色

origin

読み: オリジン
意味: 原点

目次に戻る

background-originプロパティの概要

このプロパティは要素に背景を表示する場合に、背景をどの領域を原点にして表示するかを設定するためのプロパティです。

原点とは背景や画像の書き始めの位置であり、画像で言えばイメージの左上のポイントのことになります。

つまり、簡単にいうと画像の左上のポイントをどの位置にするか。を設定するというところでしょう。

このプロパティに設定できる値は3つのキーワード値のみとなり、そのポイントからオフセットを指定するプロパティとして、 background-position プロパティが存在します。

目次に戻る

実機サンプルとサンプルコード

このプロパティは背景領域の書き出し位置の原点を指定することができます。 原点とは背景や画像の左上のポイントと言えば分かりやすいでしょうか。

このページのサンプルでは表示位置の違いを分かりやすくするために境界線を太い点線で表示しています。 なお、このプロパティはbackground-repeatプロパティで画像のリピート表示をしないように設定しておかないと違いが分かりづらいです。 サンプルの初期設定は以下の通りです。

div{
	border: 10px dashed #888;
	padding: 10px;
	background-repeat: no-repeat;
}

構文

セレクター{background-origin: 設定値;}

初期値: padding-box

初期値のpadding-boxは境界線の内側にある余白領域を基準にして、背景の書き出しをします。

div{background-origin: padding-box;}

目次に戻る

境界線の領域から背景を表示: border-box

このborder-boxは境界線の領域まで背景の表示原点を拡張して背景の書き出しをします。 つまり、境界線であるborderと背景領域が重なった状態となります。

div{background-origin: border-box;}

目次に戻る

コンテンツの領域から背景を表示: content-box

このcontent-boxはコンテンツの領域まで背景の表示原点を拡張して背景の書き出しをします。 つまり、内包されたテキストや内包要素の領域を基準にするということになります。

コンテンツ領域を分かりやすくするために「テキスト」の文字を表示して確かめてみましょう。

div{background-origin: content-box;}

目次に戻る

グローバル値

background-originプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

• inheritは親要素の値の継承を促します。
• initialは値を初期値のpadding-boxに戻します。
• unsetは継承の初期値に戻します。
  ※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。

div{font-weight: グローバル値;}

目次に戻る

補足説明

• すべての要素に適用可能
• 親要素の値を継承しない

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。

background-origin: padding-box;

background-origin: border-box;

background-origin: content-box;

目次に戻る