background-position

CSSプロパティ「background-position」の解説とサンプル。

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

background-position

背景画像の位置を指定するプロパティ。

background-imagebackground-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; }