あめつくのブログ

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

CSSで背景画像の表示位置を指定する方法

広告

ここでは、CSSで背景画像の表示位置を指定する方法を説明します。CSSで背景画像の位置を指定する場合、「横方向の位置」と「縦方向の位置」を指定する必要があります。縦方向/横方向ともに位置はpx(ピクセル)、%(パーセント)、キーワード(left,center,right,top,center,bottom)のいずれかで指定します。

「px(ピクセル)」で指定する場合は、“背景画像を表示する領域の左上”を基準として“背景画像の左上”をどの位置に表示するかをピクセル単位で指定します。横方向10px/縦方向20pxを指定したとすると、背景画像を表示する領域の左上から右方向に10px、下方向に20pxの位置に背景画像の左上が乗るように表示されます。

「%(パーセント)」で指定する場合は、“背景画像を表示する領域”と“背景画像”のそれぞれを%(パーセント)で指定した位置であわせます。横方向に20%/縦方向に40%を指定したとすると、背景画像を表示する領域の横方向20%の位置と背景画像の横方向20%の位置が揃い、背景画像を表示する領域の縦方向40%の位置と背景画像の縦方向40%の位置が揃うように表示されます。

「キーワード」で指定する場合は、“横方向”はleft/center/rightのいずれかで指定し、“縦方向”はtop/center/bottomのいずれかで指定します。これらキーワードは「%」で置き換えることができます。leftは0%/centerは50%/rightは100%に置き換えられ、topは0%/centerは50%/bottomは100%で置き換えることができます。

実際にこれら3つの方法でブログの背景画像の位置を指定すると以下のようになります。

広告

【px(ピクセル)で指定した場合】

CSSのサンプル
body{
background-position:50px 100px;
}

【%(パーセント)で指定した場合】

CSSのサンプル
body{
background-position:0% 100%;
}

【キーワードで指定した場合】

CSSのサンプル
body{
background-position:left bottom;
}

以上、「CSSで背景画像の表示位置を指定する方法」でした!!

広告

関連記事

コメント

  • トラックバックは利用できません。

  • コメント (0)

  1. この記事へのコメントはありません。

カテゴリー