background-position
background-position は背景画像の位置を指定します。background-origin が指定されている位置を基準に相対配置されます。
プロパティの詳細
- 値
- top, bottom, left, right, center, 数値
- 初期値
- 0%, 0%
- 対象
- すべての要素
- 継承
- しない
- CSS レベル
- CSS 1～
値の詳細
- left, right, center
- 横方向の配置。left：左揃え、right ：右揃え、center：中央揃え
- top, bottom, center
- 縦方向の配置。top：上揃え、bottom：下揃え、cetner：中央揃え
- 数値
- 長さを示す数値 + px, em, % 等を指定
値が1つの場合
- center の場合は画像を中央揃えにします。
- top, bottom, left, right の場合は指令された辺に配置され、それに交差する軸は中央揃えになります。
- 数値指定の場合は左からの位置を指定し、縦軸は 50％ が設定されます。
値が2つの場合
- 1つ目の値：横軸の指定
- 2つ目の値：縦軸の指定
値が4つの場合
- 1つ目の値：left か right を指定。指定された辺が基準位置になります。
- 3つ目の値：top か bottom を指定。指定された辺が基準位置になります。
- 2つ目と4つ目の値：数値 + px, em, % 等を指定。基準の辺からの距離になります。
サンプル
div {
background-position: center;
}