| 属性名 | background-position |
|---|---|
| 値 | <bg-position># |
| 値の詳細 | <bg-position> = [ [ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ] ] |
| 初期値 | 0% 0% |
| 適用可能要素 | すべて |
| 継承 | 継承しない |
| メディア | visual |
| アニメーション | 不可 |
| サポート | https://caniuse.com/mdn-css_properties_background-position |
背景画像を表示する際の基準位置を指定します。
| 値 | 説明 |
|---|---|
| center | 中央に表示します。 |
| left | 左側に表示します。 |
| right | 右側に表示します。 |
| top | 上部に表示します。 |
| bottom | 下部に表示します。 |
| <percentage> | 表示領域に対する割合で指定します。 |
| <length> | 上端、左端等からの距離で指定します。 |
横方向位置、縦方向位置の順番で表示します。省略すると center と見なされます。
background-position: left top; /* 左上 */ background-position: 20px 30px; /* 左上から右に20px, 下に30px */ background-position: left; /* left center と同意 */ background-position: top; /* center top と同意 */ background-position: center; /* center center と同意 */ background-position: 50% 50%; /* center center と同意 */
CSS3 からは下記のようなオフセット記法も可能となりました。
background-position: right 20pt bottom 20pt; /* 右端から20pt、下端から20ptの位置 */
.test {
background-position: center center;
background-image: url(./image/back.gif);
background-repeat: no-repeat;
width: 100px;
height: 100px;
border: 1px solid gray;
margin: 0em 0em 0em 1em;
}
<div class="test">こんにちわ</div>