background-origin - 背景の起点を指定する

投稿日: / 更新日:

スタイルシートのbackground-originは、背景の起点を指定するためのプロパティです。

サンプルコード

下記は、背景の起点を枠線を含めたものに指定した例です。

div {
	background-origin: border-box ;
}

デモ

スタイルシートのbackground-originを指定した例です。上の要素が指定した例で、下の要素が指定しない通常の例です。通常、背景の起点は枠線を含めない、内側の左上となります。下の要素は、枠線を含めないところが起点となっていますよね。対して、上の要素にはborder-boxを指定したため、枠線を含めた左上の位置が起点となっています。

値の指定

値の指定方法は主に下記の通りです。リンクをクリックすると、デモを確認できます。

項目説明
inherit親要素の値を引き継ぐ。例の場合、div要素のbackground-originには、bodyに指定された値(border-box)が引き継がれる。
initialプロパティの初期値が適用される。この場合、padding-box(枠線を含めない位置)となる。
padding-box初期値。枠線(border)を含めない、内部の余白(padding)を含めた左上が起点となる。
border-box枠線(border)を含めて、要素の左上が起点となる
content-box枠内余白(padding)、枠線(border)を含めない、純粋な要素の左上が起点となる。この例では、余白(padding)に50pxを指定しているので、左上から右方向、下方向にそれぞれ50px離れた位置が起点となっています。

ブラウザのサポート

2016年7月現在の、ブラウザのサポート状況は次の通りです。全ての主要ブラウザで、ベンダープレフィクスなど気にすることなく利用できます。

  • Chrome

    ●

    -

    時期不明

  • Firefox

    ●

    -

    時期不明

  • Safari

    ●

    -

    時期不明

  • Ie

    ●

    -

    時期不明

  • Edge

    ●

    -

    時期不明

  • Opera

    ●

    -

    時期不明

  • Safari(iOS)

    ●

    -

    時期不明

  • Ie Mobile

    ●

    -

    時期不明

  • Chrome

    ●

    -

    時期不明

  • Android

    ●

    -

    時期不明

  • FF Mobile

    ●

    -

    時期不明

  • Opera Mobile

    ●

    -

    時期不明