CSS: background-position 背景画像の位置を指定する

CSS で背景画像の位置を指定するには、background-position プロパティを使用します。 初期値は「0% 0%」なので、何も指定しない場合はボックスの左上が起点となります。

background-position プロパティの使用例


background-position: 10px 10px;   /* 実数値＋単位    */
background-position: 20% 20%;     /* パーセント値＋% */
background-position: right top;   /* 位置指定       */

値の指定方法には「実数値＋単位」、「パーセント値＋%」、「位置指定」の３通りがあります。 いずれも水平方向と垂直方向の位置を半角スペースで区切って指定します。

★ 実数値＋単位

「10px 20px」と指定した場合は、 パディング領域の左側から 10px、上から 20px の位置から背景画像が表示されます。 1つだけ指定した場合は、水平方向の位置を指定することになり、垂直方向は「center」となります。

★ パーセント値＋%

「0% 0%」と指定した場合は、パディング領域の左上と画像の左上がそろいます。 「100% 100%」と指定した場合は、パディング領域の右下と画像の右下がそろいます。 1つだけ指定した場合は、水平方向の位置を指定することになり、垂直方向は「center」となります。

★ 位置指定

水平方向（left、center、right）、垂直方向（top、center、bottom）を半角スペースで 区切って指定します。１つだけ指定した場合は、もう一方の値が「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>
HTML・CSS入門