background-position

Home>CSS>プロパティリファレンス>background-position

この情報はお役に立ちましたか?よろしければ皆様にもお知らせください。

  このエントリーをはてなブックマークに追加 mixiチェック  

background-positionプロパティの役割

背景画像の表示位置を指定します。

background-positionプロパティに設定できる値

数値 整数。pxで記述。
0~100%
bottom 画像を下に表示。
center 画像を中央に表示。
left 画像を左端に表示。
right 画像を右端に表示。
top 画像を上に表示。

値は、2つまで指定することができます。
キーワードで指定した場合は、1つ目は水平方向、2つ目は垂直方向の位置指定です。
数値または%で指定した場合は、1つ目は左からの距離、2つ目は上からの距離です。

background-positionプロパティの使い方

数値で指定する場合

以下のサンプルでは、左から20ピクセル、上から30ピクセルの位置に表示します。

background-position:20px 30px;

%で指定する場合

以下のサンプルでは、ブラウザの範囲に対して、左から20%、上から30%の位置に表示します。

background-position:20% 30%;

キーワードで指定する場合

以下のサンプルでは、左上に寄せて表示します。

background-position:left top

数値と%の組み合わせ

なお、数値と%を組み合わせて指定することもできますが、キーワードをほかの値と組み合わせることはできません。

関連リンク

よく読まれている記事

UpDate:2010-6-29