CSS background-origin 属性

定義と使用方法

background-origin 属性の定義 background-position 属性はどの位置に対して位置を指定しますか。

注釈:背景画像が background-attachment 属性は「fixed「」の場合、この属性は効果がありません。

参照もしてください:

CSS チュートリアル:CSS 背景CSS 背景(高度)

HTML DOM リファレンスマニュアル:backgroundOrigin 属性

背景画像を内容フレームに対して位置を指定します:

div
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;
background-origin:content-box;
}

実際に試してみてください

CSS 文法

background-origin: padding-box|border-box|content-box;

属性値

説明 テスト
padding-box 背景画像はパディングフレームボックスに対して位置を指定されます。 テスト
border-box 背景画像はフレームボックスに対して位置を指定されます。 テスト
content-box 背景画像は内容フレームに対して位置を指定されます。 テスト

技術的詳細

デフォルト値: padding-box
継承性: no
バージョン: CSS3
JavaScript 文法: object.style.backgroundOrigin="content-box"

ブラウザのサポート

テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
4.0 9.0 4.0 3.0 10.5