background-position
背景画像の表示位置
| ブラウザ |
|
| 適用対象 |
|
| 継承 |
継承しない
|
| 初期値 |
0% 0%
|
| メディア |
|
background-position: right top;
プロパティの値
| プロパティ名 |
値 |
説明 |
background-position |
長さ、% |
数値+単位（px 等）またはパーセント （初期値は 0% 0%） |
| キーワード指定 （水平方向） |
left |
左 |
center |
中央 |
right |
右 |
| キーワード指定 （垂直方向） |
top |
上 |
center |
中央 |
bottom |
下 |
- 水平方向と垂直方向の位置を、1つまたは2つの値で指定します。2つの値で指定する場合は、半角スペースで区切って記述します。
- 長さまたは%による指定では、1つめの値が水平方向、2つめの値が垂直方向の位置になります。それぞれ、左または上からの距離で指定します。
- 長さまたは%の値が1つの場合は、その値は水平方向の位置を指定したことになります。この場合、垂直方向の位置は自動的に50%になります。
- キーワードの値が1つの場合は、省略した方の位置は自動的に
centerになります。
- 2つの値で指定する場合は、長さと%を組み合わせることができます。しかし、長さまたは%とキーワードとを組み合わせることはできません。
値の指定例
100px 30px … 左から100px、上から30pxの位置に表示30% 60% … 左から30%、上から60%の位置に表示100px 60% … 左から100px、上から60%の位置に表示
100px … 左から100px、上から50%の位置に表示30% … 左から30%、上から50%の位置に表示
right top … 右上に表示left bottom … 左下に表示center center … 中央に表示
right … 右の中央に表示bottom … 下の中央に表示center … 中央に表示
