| 属性名 | background-position |
|---|---|
| 値 | <position>[, <position>]* |
| 値の詳細 |
<position> = <pos1> | <v-pos1> <h-pos1> | <v-pos2> && <h-pos2> <pos1> = left | center | right | top | bottom | <percentage> | <length> <v-pos1> = left | center | right | <percentage> | <length> <h-pos1> = top | center | bottom | <percentage> | <length> <v-pos2> = center | [ left | right ] [ <percentage> | <length> ]? <h-pos2> = center | [ top | bottom ] [ <percentage> | <length> ]? |
| 初期値 | 0% 0% |
| 適用可能要素 | すべて |
| 継承 | 継承しない |
| メディア | visual |
| アニメーション | 不可 |
| CSS | IE/Edge | Firefox | Chrome | Opera | Safari | |
|---|---|---|---|---|---|---|
| 基本 | CSS1 | 4.0 | 1.0 | 1.0 | 3.5 | 1.0 |
| 複数背景 | CSS3 | 9.0 | 3.6 | 1.0 | 10.5 | 1.3 |
| オフセット | CSS3 | 9.0 | 13 | 25 | 10.5 | 7.0 |
背景画像を表示する際の基準位置を指定します。
| 値 | 説明 |
|---|---|
| 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>