背景画像の配置方法：
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
Try it Yourself ❯
他の "Try it Yourself" 例が下にあります。
background-position プロパティは、背景画像の開始位置を設定します。
チップ: デフォルトでは、背景画像は要素の左上隅に配置され、縦・横両方向に繰り返されます。
| デフォルト値： | 0% 0% |
|---|---|
| 継承： | 継承する |
| アニメーション可否： | 可。animatable を参照 Try it |
| バージョン： | CSS1 |
| JavaScript 構文： | object.style.backgroundPosition="center" Try it |
表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。
| プロパティ | |||||
|---|---|---|---|---|---|
| background-position | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
注: IE8 以前では、一つの要素に複数の背景画像をサポートしていません。
background-position: value;
| 値 | 説明 | Play it |
|---|---|---|
| left top left center left bottom right top right center right bottom center top center center center bottom |
キーワードを 1 つだけ指定した場合、もう一方の値は "center" になります | Play it ❯ |
| x% y% | 最初の値は横位置を、2 番目の値は縦位置を表します。 左上隅は、0% 0% で、右下隅は、100% 100% です。1 つの値だけを指定した場合、もう一方の値は 50% になります。 デフォルト値は、0% 0% です | Play it ❯ |
| xpos ypos | 最初の値は横位置を、2 番目の値は縦位置を表します。 左上隅は、0 0 です。単位は、ピクセル(0px 0px) や、他の CSS の単位を使用できます。 1つの値だけを指定した場合、もう一方の値は 50% になります。%と位置をミックスした使用も可能です | Play it ❯ |
| initial | プロパティにデフォルト値を設定します。initial を参照 | Play it ❯ |
| inherit | このプロパティは親要素を継承します。 inherit を参照 |
%を使用した背景画像の配置方法：
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 30% 20%;
}
Try it Yourself ❯
ピクセルを使用した背景画像の配置方法：
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50px 100px;
}
Try it Yourself ❯
CSS チュートリアル： CSS Background
CSSリファレンス：background-image プロパティ
HTML DOM リファレンス： backgroundPosition プロパティ