{background-position:横方向の位置 縦方向の位置;}でボックスの 背景画像の表示位置（横方向、縦方向）を指定する ことができます。

■ 背景画像の表示位置

背景画像を表示できる位置は以下の通りです。

【ブラウザ表示】

画像がボックスの左下に表示されています。

<p class="box13">画像がボックスの左下に表示されています。</p>

p.box13{
border:1px solid;
background-position:left bottom;
background-image:url(../image/ball3.gif);
background-repeat:no-repeat;
height:70px;
}

<p style="border:1px solid; background-position:left bottom; background-image:url(../image/ball3.gif); background-repeat:no-repeat; height:70px;">
画像がボックスの左下に表示されています。
</p>

■ 表示位置を%やピクセルで指定する

背景画像の表示位置を%やピクセルで指定することもできます。
{background-position:10px 10px;}のように記述し左から10pxの位置、 上からは10pxの位置に表示するということになります。 デフォルトの値は{background-position:0% 0%;}です。

【ブラウザ表示】

画像がボックスの左から20pxの位置、 上から40pxの位置に表示されています。

<p class="pix">
画像がボックスの左から20pxの位置、
上から40pxの位置に表示されています。
</p>

p.pix{
border:1px solid;
background-position:20px 40px;
background-image:url(../image/ball3.gif);
background-repeat:no-repeat;
height:70px;
}

<p style="border:1px solid; background-position:20px 40px; background-image:url(../image/ball3.gif); background-repeat:no-repeat; height:70px;">
画像がボックスの左から20pxの位置、
上から40pxの位置に表示されています。
</p>

■ その他の項目

スタイルシート一覧のページに戻る