background-position
- ブラウザ
背景画像の表示位置
background-position: 値;
背景画像の表示位置を指定するプロパティです。
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 … 中央に表示
.example {
background-color: #ffffff;
background-image: url(back.gif);
background-repeat: repeat-y;
background-position: right top;
}
