CSS 参考手册

CSS @规则(RULES)

CSS 属性大全

CSS3 background-origin属性の使用方法と例

CSS 背景-origin属性は、背景の位置を指定するために使用され、以下のように使用されます：background-image属性で指定された画像の原点の位置を指定します。

以下の表は、この属性の使用状況とバージョンハイストリをまとめています。

デフォルト値：	padding-box
適用：	すべての要素に適用されます。また、以下に適用されます：::first-letterおよび::first-line。
継承：	ありません
アニメーション制作可能：	いいえ。参照してくださいアニメーション属性。
バージョン：	CSS3の新機能
JavaScript 構文:	object　　　object.style.backgroundOrigin="content-box"

background-originの使用方法

この属性の構文は以下の通りです：

background-origin: border-box　|　padding-box　|　content-box　|　initial　|　inherit

以下の例では、backgroundを使用する方法を示しています。-origin属性。

例

.box　{
　　　　width:　250px;
　　　　height:　150px;
　　　　padding:　10px;
　　　　border:　6px dashed #333;
　　　　background: url("images/sky.jpg") no-repeat;
　　　　background-size: contain;
　　　　background-origin: content-box;
}

テストをしてみる‹/›

注：このbackground-origin属性値が省略された場合background-attachment属性がfixedに指定されています。

属性値

以下のテーブルはこの属性の値を説明しています。

値	説明
border-box	背景をフレームの外部エッジにまで拡張します。フレームの下に背景が描画されます。
padding-box	背景をパディングの外部エッジにまで拡張します。フレームの下に背景は描画されません。デフォルト値です。
content-box	背景を内容フレーム内（カットアウト）にのみ描画します。フレームとパディングエリアの下に背景は描画されません。
initial	この属性をデフォルト値に設定します。
inherit	指定された場合、関連する要素は親要素のbackgroundを使用します。-origin属性の計算値。

ブラウザの互換性

background-origin属性のブラウザの互換性、すべての主要ブラウザがこの属性をサポートしています。

	Firefox 4+ Google Chrome4+ Internet Explorer 9+ Apple Safari 3+ Opera 10。5+

さらに詳しく

以下のチュートリアルを参照してください：CSS3背景、CSS3背景。

CSS 背景-position 属性 CSS 背景-image 属性