background-origin

CSSでは、背景の表示を開始する基点を指定できます。

本ページでは、background-originプロパティについて説明します。

background-originプロパティとは

background-originプロパティを使うと、背景の表示を開始する基点を指定できます。例えば、ボーダー領域を開始の基点として、背景を表示したりできます。

background-originの定義は、以下のとおりです。

【background-originの定義】
border-box | padding-box | content-box
初期値 padding-box
適用対象 すべての要素
継承 しない

background-imageで複数画像を指定していた場合は、カンマ(,)で区切って複数指定できます。

値の説明

以下は、background-originで使える値と説明です。

border-box
ボーダーボックス(枠線部分まで)を基点にします。
padding-box
パディングボックスを基点にします。
content-box
コンテンツボックスを基点にします。

ボーダーボックスなどについては、「CSSのボックスモデル」をご参照ください。

利用例

background-originデフォルトのpadding-boxがどのように表示されるかを示すため、以下のCSSを利用します。

【padding-boxの表示例を示すためのCSS】
.test {
  height: 30px;
  background-image: url("../images/image1.png");
  background-repeat: no-repeat;
  padding: 20px;
  border: 40px solid rgba(255,0,0,0.2);
}

上記をdivなどにクラスtestで適用すると、以下のように表示されます。

背景画像は、コンテンツボックス左上を基点に表示されています。

パディングボックス左上を表示の基点として、背景画像が表示されています。

次は、border-boxの時の利用例です。

【border-boxの利用例】
.test {
  height: 30px;
  background-image: url("../images/image1.png");
  background-repeat: no-repeat;
  background-origin: border-box;
  padding: 20px;
  border: 40px solid rgba(255,0,0,0.2);
}

上記は、以下のように表示されます。

背景画像は、ボーダーボックス左上を基点に表示されています。

ボーダーボックスの左上に、背景画像が表示されています。

content-boxの時は、以下のように表示されます。

背景画像は、コンテンツボックス左上を基点に表示されています。

ボーダー領域の内側には、パディング領域があります。その内側のコンテンツボックス左上を基点として、背景画像が表示されています。

次は、複数画像を使っている場合です。

【複数画像の利用例】
.test {
  height: 30px;
  background-image: url("../images/image1.png"), url("../images/image2.png");
  background-repeat: no-repeat, no-repeat;
  background-origin: border-box, content-box;
  padding: 20px;
  border: 40px solid rgba(255,0,0,0.2);
}

上記は、以下のように表示されます。

1つ目の背景画像は、コンテンツボックス左上を基点に表示されています。2つ目の背景画像は、ボーダーボックス左上を規定に表示されています。

image1.pngは、ボーダーボックス左上から表示されています。image2.pngは、コンテンツボックス左上から表示されています。

background-clipとの違い

background-clipは、背景を表示する範囲です。ボーダーボックス内で表示するのか、パディングボックス内だけに表示するのかなどを指定します。

background-originは、背景を表示し始める基点です。このため、パディングボックスを基点としても、backdgound-clipがborder-boxになっていると、背景自体はボーダー領域まで表示されます。これが、デフォルトです。

例を示します。以下のCSSがあったとします。background-clipもbackground-originも指定していません。

【複数画像の利用例】
.test {
  height: 30px;
  background-image: url("../images/image1.png");
  padding: 20px;
  border: 40px solid rgba(255,0,0,0.2);
}

これは、以下のように表示されます(表示する画像は、円の画像に変えています)。

背景画像は、パディングボックス左上を基点に表示されていて、画像は繰り返し複数表示されています。左や上の表示でははみ出した部分の画像が表示されていません。

パディングボックス左上から背景画像の表示が開始されていますが、ボーダー領域まで表示はされています。

この例では、ボーダー領域が半透明のため、一番外の左や上の画像は途中で途切れて表示されています。デフォルトでは、基点と表示領域が異なるためです。

もし、background-origin:border-boxを指定すると、以下のように表示されます。

背景画像は、ボーダーボックス左上を基点に表示されているため、左や上の表示でははみ出した部分はありません。

一番外の左や上の画像は、途切れていません。ここを基点に、背景画像の表示が開始されるためです。

今回の例では、ボーダー領域をrgba(255,0,0,0.2)で半透明にしているため背景画像も見えていますが、半透明でなければボーダー領域の背景画像は隠れて見えません。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

【パソコン】
項目 IE Ed Fx Ch Sa Op
background-origin
【スマートフォン】
項目 Sa An Op Ch Fx Sm
background-origin
サポート
制限あり
×
未サポート
不明
IE
Internet Explorer
Ed
Edge
Fx
Firefox
Ch
Chrome
Sa
Safari
Op
Opera
An
Android Browser
Sm
Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。

CSSプロパティ一覧」に戻る