background-position
Home>CSS>プロパティリファレンス>background-position
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
数値と%の組み合わせ
なお、数値と%を組み合わせて指定することもできますが、キーワードをほかの値と組み合わせることはできません。
関連リンク
- プロパティリファレンス:background
- プロパティリファレンス:background-attachment
- プロパティリファレンス:background-color
- プロパティリファレンス:background-image
- プロパティリファレンス:background-repeat
- CSSサンプル:CSS Spriteを活用する
- CSSサンプル:ロールオーバーイメージ
よく読まれている記事
- 右クリックメニューの表示が遅い【Information】
- 画像の一部にリンクを貼る(クリッカブルマップ【Dreamweaver】
- 一定時間でローテーションする広告【JavaScript】
- Dreamweaver【Dreamweaver】
- クリックした画像を拡大・縮小する【JavaScript】
UpDate:2010-6-29