CSS: background-position 背景画像の位置を指定する
CSS で背景画像の位置を指定するには、background-position プロパティを使用します。 初期値は「0% 0%」なので、何も指定しない場合はボックスの左上が起点となります。
background-position プロパティの使用例
background-position: 10px 10px; /* 実数値+単位 */
background-position: 20% 20%; /* パーセント値+% */
background-position: right top; /* 位置指定 */
値の指定方法には「実数値+単位」、「パーセント値+%」、「位置指定」の3通りがあります。 いずれも水平方向と垂直方向の位置を半角スペースで区切って指定します。
★ 実数値+単位
「10px 20px」と指定した場合は、 パディング領域の左側から 10px、上から 20px の位置から背景画像が表示されます。 1つだけ指定した場合は、水平方向の位置を指定することになり、垂直方向は「center」となります。
★ パーセント値+%
「0% 0%」と指定した場合は、パディング領域の左上と画像の左上がそろいます。 「100% 100%」と指定した場合は、パディング領域の右下と画像の右下がそろいます。 1つだけ指定した場合は、水平方向の位置を指定することになり、垂直方向は「center」となります。
★ 位置指定
水平方向(left、center、right)、垂直方向(top、center、bottom)を半角スペースで 区切って指定します。1つだけ指定した場合は、もう一方の値が「center」となります。
leftとtopは「0%」、centerは「50%」、rightとbottomは「100%」を指定するのと同じです。
背景画像の位置を指定するサンプルコード
下のボックス(div 要素)は、背景画像として手のマーク画像が表示されています。 繰り返し方法は「no-repeat」として、位置は「right bottom」を指定しています。 その結果右下に背景画像が一つだけ表示されます。
<div class="sample1"></div>
<style>
div.sample1 {
width: 300px;
height: 150px;
border: 1px solid black;
background-image: url("../img/hand.png");
background-position: right bottom;
background-repeat: no-repeat;
}
</style>