例
背景画像を配置する方法：
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
»それを自分で試してみてください もっと"Try it Yourself"以下の例。
定義と使用法
background-positionプロパティは、背景画像の開始位置を設定します。
Tip:デフォルトでは、背景画像は、要素の左上隅に配置され、垂直方向と水平方向の両方に繰り返されます。
| デフォルト値： | 0% 0% |
|---|---|
| 継承されました： | no |
| アニメーション： | yes. Read about animatable Try it |
| バージョン： | CSS1 |
| JavaScriptシンタックス： | object .style.backgroundPosition="center" Try it |
ブラウザのサポート
表中の数字は完全にプロパティをサポートする最初のブラウザのバージョンを指定します。
| プロパティ | |||||
|---|---|---|---|---|---|
| background-position | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Note: IE8以前の一つの要素に複数の背景画像をサポートしていません。
CSSの構文
background-position:value;プロパティ値
| 値 | 説明 | それを再生します |
|---|---|---|
| left top left center left bottom right top right center right bottom center top center center center bottom | キーワードを1つだけ指定した場合、他の値になります"center" | それを再生します» |
| x% y% | 最初の値は水平位置で、2番目の値は垂直です。 左上隅には、0％、0％です。 右下隅は、100％、100％です。 値を1つだけ指定すると、他の値は50％になります。 。 デフォルト値は次のとおりです。0％0％ | それを再生します» |
| xpos ypos | 最初の値は水平位置で、2番目の値は垂直です。 左上は0 0単位はピクセルであることができるである(0px 0px)または任意の他のCSS単位 。 値を1つだけ指定すると、他の値は50％になります。 あなたは％とポジションを混在させることができます | それを再生します» |
| initial | このプロパティがデフォルト値に設定します。 初期についての記事を読みます | それを再生します» |
| inherit | その親要素からこのプロパティを継承します。 継承についての記事を読みます |
その他の例
例
どのようにパーセントを使用して、背景画像を配置する方法：
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 30% 20%;
}
»それを自分で試してみてください 例
どのピクセルを使用して背景画像を配置するには：
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50px 100px;
}
»それを自分で試してみてください 関連ページ
CSSチュートリアル： CSSの背景
CSSリファレンス： background-image property
HTML DOMリファレンス： backgroundPosition property