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』プロパティは背景描画の基準位置を設定するプロパティとなっています。

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

トップページへ

WebProgrammingPortalウェブプログラミングポータル