background-position
背景画像の位置を指定するプロパティ。
background-image、background-repeatと同時に使用し、背景画像の位置を指定する。
値
| 位置で指定 | 「left（左）」（「right（右）」「top（上）」「bottom（下）」「center（中央）」のいずれかを指定。この内の2つを組み合わせることも可能。 |
|---|---|
| pxで指定 | 背景画像を指定したボックスの左上からの位置を、横位置 縦位置の順に「px」で指定。 |
| ％で指定 | 背景画像を指定したボックスの左上からの位置を、横位置 縦位置の順に「％」で指定。 |
使用例 - サンプル(A) / サンプル(B)
サンプル(A)
[CSSの記述]
.sampleA {
background-image:url('hogehoge.gif');
background-position:right;
background-repeat:repeat-y;
}
[HTMLの記述]
<p class="sampleA">テキストテキスト</p>
[ブラウザ上の表示]
背景画像を「right」に指定し、縦に繰り返し表示。
[backgroundプロパティで指定]
背景に関する指定を一括で行うbackgroundを利用すると、CSSの記述は次の通りとなる。
.sampleA { background:url('hogehoge.gif') right repeat-y; }
サンプル(B)
[CSSの記述]
.sampleB {
height:100px;
background-image:url('hogehoge.gif');
background-position:40px 10px;
background-repeat:no-repeat;
}
[HTMLの記述]
<div class="sampleB">テキストテキスト</div>
[ブラウザ上の表示]
背景色を左から40px、上から10pxの位置に繰り返さず表示。
[backgroundプロパティで指定]
背景に関する指定を一括で行うbackgroundを利用すると、CSSの記述は次の通りとなる。
.sampleA { background:url('hogehoge.gif') 40px 10px no-repeat; }
- 前の記事：background-image
- 次の記事：background-repeat