CSS背景-起源プロパティ
例
背景画像をコンテンツの左上隅から開始します。
#example1 {
border: 10px dashed black;
padding:
25px;
background: url(paper.gif);
background-repeat: no-repeat;
background-origin:
content-box;
}
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
このbackground-origin
プロパティは、背景画像の原点位置(背景配置領域)を指定します。
注:background-attachmentが「修正済み」の場合、このプロパティは効果がありません 。
デフォルト値: | パディングボックス |
---|---|
遺伝性の: | いいえ |
アニメート可能: | 番号。アニメート可能について読む |
バージョン: | CSS3 |
JavaScript構文: | object .style.backgroundOrigin = "content-box" |
ブラウザのサポート
表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。
Property | |||||
---|---|---|---|---|---|
background-origin | 4.0 | 9.0 | 4.0 | 3.0 | 10.5 |
CSS構文
background-origin: padding-box|border-box|content-box|initial|inherit;
プロパティ値
Value | Description | Play it |
---|---|---|
padding-box | Default value. The background image starts from the upper left corner of the padding edge | |
border-box | The background image starts from the upper left corner of the border | |
content-box | The background image starts from the upper left corner of the content | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
その他の例
例
<div>要素に2つの背景画像を設定します。「paper.gif」の背景画像をパディングエッジの左上隅から開始し、「img_tree.gif」の背景画像をコンテンツの左上隅から開始します。
#example1 {
border: 10px dashed black;
padding: 25px;
background: url(img_tree.gif), url(paper.gif);
background-repeat: no-repeat;
background-origin:
content-box, padding-box;
}
関連ページ
CSSチュートリアル:CSSの背景
HTML DOMリファレンス:backgroundOriginプロパティ