| 属性名 | background-position-x background-position-y |
|---|---|
| 値 |
background-position-x: [ center | [[ left | right | x-start | x-end ]? <length-percentage> ]! ]# background-position-y: [ center | [[ top | bottom | y-start | y-end ]? <length-percentage> ]! ]# |
| 値の詳細 | <length-percentage> = <length> | <percentage> |
| 初期値 | 0% |
| 適用可能要素 | すべて |
| 継承 | なし |
| アニメーション | 離散値 |
背景画像を表示する際の x 方向、y 方向の位置を指定します。x-start, x-end はアラビア語のように文章を右から左に記述するケースにも対応する場合に便利です。
| 値 | 説明 |
|---|---|
| center | 中央に表示します。 |
| left | 左側に表示します。 |
| right | 右側に表示します。 |
| top | 上側に表示します。 |
| bottom | 下側に表示します。 |
| x-start | X軸の文章の開始方向に表示します。 |
| x-end | X軸の文章の終了方向に表示します。 |
| y-start | Y軸の文章の開始方向に表示します。 |
| t-end | Y軸の文章の終了方向に表示します。 |
| <percentage> | 表示領域に対する割合で指定します。 |
| <length> | 長さで指定します。 |
横方向位置、縦方向位置を指定します。
background-position-x: left; /* 左端 */ background-position-x: 3rem; /* 左端から3remの位置 */ background-position-x: 30%; /* 左端から30%の位置 */ background-position-x: right; /* 右端 */ background-position-x: center; /* 左右中央 */ background-position-y: top; /* 上端 */ background-position-y: bottom; /* 下端 */ background-position-y: center; /* 上下中央 */
下記のようなオフセット記法も可能です。Firefox はサポート済ですが、Chrome 106 時点では未サポートのようです。
background-position-x: right 3rem; /* 右端から3remの位置 */
.test {
background-position-x: center;
background-position-y: center;
background-image: url(./image/back.gif);
background-repeat: no-repeat;
width: 5rem;
height: 5rem;
border: 1px solid gray;
}
<div class="test"></div>