Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSSプロパティ辞典

background-origin

背景が描画される場合の基準位置(始まりの位置)を設定できます。

『background-attachment』プロパティの値が『fixed』の場合『background-origin』プロパティは全て無視されます。

サンプルコード
div.test { background-origin: padding-box;}
div.test1 { background-origin: border-box;}
div.test2 { background-origin: content-box;}
指定可能な値一覧
概要
padding-boxパディングボックス(パディングの外側の端まで)を基準位置とします。これが初期値です。
border-boxボーダーボックス(ボーダーの外側の端まで)を基準位置とします。
content-boxコンテントボックス(要素の内容が表示される余白を含まない領域)を基準位置とします。
ブラウザでの表示結果

※背景画像は以下を使用しています。

<div style="border: dashed 10px rgba(0, 0, 255, 0.5); height: 100px; padding: 10px; font-weight: bold; background-image: url(/dics/dictionary-css/img/sample_bg1.png); background-origin: padding-box;">高さ100px、パディング10pxのdiv要素です。ボーダーは『dashed 10px rgba(0, 0, 255, 0.5)』を指定しています。</div>

<div style="border: dashed 10px rgba(0, 0, 255, 0.5); height: 100px; padding: 10px; font-weight: bold; background-image: url(/dics/dictionary-css/img/sample_bg1.png); background-origin: border-box;">高さ100px、パディング10pxのdiv要素です。ボーダーは『dashed 10px rgba(0, 0, 255, 0.5)』を指定しています。</div>

<div style="border: dashed 10px rgba(0, 0, 255, 0.5); height: 100px; padding: 10px; font-weight: bold; background-image: url(/dics/dictionary-css/img/sample_bg1.png); background-origin: content-box;">高さ100px、パディング10pxのdiv要素です。ボーダーは『dashed 10px rgba(0, 0, 255, 0.5)』を指定しています。</div>

対応ブラウザ
IE6 IE7 IE8 IE9 IE10 IE11 Safari Chrome Firefox Opera

iPhone Safari Android2系 標準ブラウザ Android4系 標準ブラウザ

概要

背景が描画される際の基準位置(原点の位置)を設定できます。

以下に背景画像の繰り返しを切ったサンプルを用意しました。各値の描写の違いは以下をご確認ください。

『padding-box』と設定するとボーダーの内側から背景画像が描画されます。

<div style="border: dashed 10px rgba(0, 0, 255, 0.5); height: 100px; padding: 10px; font-weight: bold; background-image: url(/dics/dictionary-css/img/sample_bg1.png); background-origin: padding-box; background-repeat: no-repeat;">高さ100px、パディング10pxのdiv要素です。ボーダーは『dashed 10px rgba(0, 0, 255, 0.5)』を指定しています。</div>

『border-box』と設定するとボーダーの外側から背景画像が描画されます。

<div style="border: dashed 10px rgba(0, 0, 255, 0.5); height: 100px; padding: 10px; font-weight: bold; background-image: url(/dics/dictionary-css/img/sample_bg1.png); background-origin: border-box; background-repeat: no-repeat;">高さ100px、パディング10pxのdiv要素です。ボーダーは『dashed 10px rgba(0, 0, 255, 0.5)』を指定しています。</div>

『content-box』と設定すると要素の内容が表示される余白を含まない領域(パディングの内側)から背景画像が描画されます。

<div style="border: dashed 10px rgba(0, 0, 255, 0.5); height: 100px; padding: 10px; font-weight: bold; background-image: url(/dics/dictionary-css/img/sample_bg1.png); background-origin: content-box; background-repeat: no-repeat;">高さ100px、パディング10pxのdiv要素です。ボーダーは『dashed 10px rgba(0, 0, 255, 0.5)』を指定しています。</div>

『background-origin』プロパティは『background-clip』プロパティと混合しがちになりますが、『background-clip』プロパティは背景描画の領域を設定するプロパティで、『background-origin』プロパティは背景描画の基準位置を設定するプロパティとなっています。

記事の間違いや著作権の侵害等ございましたらお手数ですがまでご連絡頂ければ幸いです。