background-position：背景画像の表示開始位置を指定する
| 適用対象 | 全ての要素 |
| 継承 | しない |
background-positionプロパティは、背景画像の表示開始位置を指定する事ができます。値を横方向・縦方向の順にスペースで区切ってそれぞれ指定する事もできます。
background-positionに与えられる値
- background-position: 横位置 縦位置;
- 横位置を [left, center, right]、縦位置を [top, center ,bottom] で指定します。両方指定するときは半角スペースで区切って記述します。この指定方法はそれぞれ [0%, 50%, 100%] と指定しているのと同じです。
- background-position: 値%;
- 背景画像が表示される要素の左上からの距離を横方向、縦方向の順に『％』で指定できます。例えば [background-position: 50% 50%;] と指定した場合、表示される領域の左端から50%、上端から50%の位置が背景画像の表示開始位置となります。
- background-position: 値px, 値em;
- 背景画像が表示される要素の左上からの距離を横方向、縦方向の順に『px』や『em』などの単位で指定できます。マイナス値も設定する事が可能です。
background-positionの使用サンプル
CSS
.bg_sample {
width: 200px;
height: 100px;
border: 1px solid #666666;
background-color: #DDDFFF;
background-image: url(images/sample_bg_stripe.png);
background-position: 80px 40px;
background-repeat: no-repeat;
padding: 5px;
}
XHTML
<div class="bg_sample">表示サンプル</div>
表示確認
表示サンプル
background-positionに関連するCSSプロパティ
| 背景（バックグラウンド） | |
|---|---|
| background | 背景に関する指定をまとめて行う |
| background-attachment | 背景画像の固定・移動を指定する |
| background-break | インライン要素の背景画像の繰り返し方法を指定する |
| background-clip | 背景の描画範囲を指定する |
| background-color | 背景色を指定する |
| background-image | 背景画像を指定する |
| background-origin | 背景の描画する際の基準となるボックスを指定する |
| background-position | 背景画像の表示開始位置を指定する |
| background-repeat | 背景画像の繰り返しを指定する |
| background-size | 背景画像を表示するサイズ（大きさ）を指定する |