CSS background-position 属性
定義と用法
background-position 属性は背景画像の開始位置を設定する。
この属性は背景の元画像（ background-image 定義）の場所、背景画像が繰り返される場合、このポイントから始まる。
ヒント：background-attachment属性を"fixed"、これによりFirefoxとオペラで属性が正常に動作することを保証できます。
も参照してください：
CSS タイプ：CSS 背景
CSS リファレンスマニュアル：background-image 属性
HTML DOM リファレンスマニュアル：backgroundPosition 属性
例
背景画像を定位する方法：
body
{
background-image:url('bgimage.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
CSS 语法
background-position: value;
属性値
| 値 | 説明 |
|---|---|
|
キーワードを1つ指定した場合、2番目の値は"center"になります。 デフォルト値：0% 0%。 |
| x% y% |
最初の値は水平位置、2番目の値は垂直位置です。 左上角は0% 0%。右下角は100% 100%です。 値を1つ指定した場合、もう1つの値は50%になります。 |
| xpos ypos |
最初の値は水平位置、2番目の値は垂直位置です。 左上角は0 0です。単位はピクセル(0px 0px)または他のCSS単位です。 値を1つ指定した場合、もう1つの値は50%になります。 パーセントとpositionの値を混ぜて使用することができます。 |
技術的詳細
| デフォルト値： | 0% 0% |
|---|---|
| 継承性： | no |
| バージョン： | CSS1 |
| JavaScript 语法： | object.style.backgroundPosition="center" |
他の例も
- パーセントを使用して背景画像を定位する方法
- この例では、ページ上で背景画像をパーセントを使用して定位する方法を示します。
- ピクセルを使用して背景画像を定位する方法
- この例では、ページ上で背景画像をピクセルを使用して定位する方法を示します。
ブラウザのサポート
テーブルの数字には、その属性を完全にサポートする最初のブラウザのバージョンが記載されています。
| クローム | エッジ | ファイアフォックス | サファリ | オペラ |
|---|---|---|---|---|
| クローム | IE / エッジ | ファイアフォックス | サファリ | オペラ |
| 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
