例
背景画像は、コンテンツの左上隅から始めましょう：
#example1
{
background:url(img_flwr.gif);
background-repeat: no-repeat;
padding:35px;
background-origin: content-box;
}
»それを自分で試してみてください 定義と使用法
背景画像が配置されている場所のbackground-originプロパティを指定します。
Note:バックグラウンド・添付ファイルのプロパティがに設定されている場合は"fixed" 、このプロパティは効果がありません。
| デフォルト値： | padding-box |
|---|---|
| 継承されました： | no |
| アニメーション： | no. Read about animatable |
| バージョン： | CSS3 |
| JavaScriptシンタックス： | object .style.backgroundOrigin="content-box" Try it |
ブラウザのサポート
表中の数字は完全にプロパティをサポートする最初のブラウザのバージョンを指定します。
| プロパティ | |||||
|---|---|---|---|---|---|
| background-origin | 4.0 | 9.0 | 4.0 | 3.0 | 10.5 |
CSSの構文
background-origin: padding-box|border-box|content-box|initial|inherit;プロパティ値
| 値 | 説明 | それを再生します |
|---|---|---|
| padding-box | デフォルト値。 背景画像は、パディング辺の左上隅から始まります | それを再生します» |
| border-box | 背景画像が境界線の左上隅から開始します | それを再生します» |
| content-box | 背景画像は、コンテンツの左上隅から始まります | それを再生します» |
| initial | このプロパティがデフォルト値に設定します。 初期についての記事を読みます | それを再生します» |
| inherit | その親要素からこのプロパティを継承します。 継承についての記事を読みます |
関連ページ
CSS3チュートリアル： CSS3の背景
HTML DOMリファレンス： backgroundOrigin property