| プロパティ名 | 値 | 適用対象 | 継承 |
|---|---|---|---|
| background-position: | 背景画像の位置 | ブロックレベル要素・置換要素 | なし |
| 値 | 説明 | |
|---|---|---|
| 背景画像の位置 | 数値 | ボックスの領域の左上からの距離を指定します。 |
| 数値（%） | ボックスの領域の幅あるいは高さに対する割合を ％で指定します。 | |
| top | ボックスの領域の上端に揃えて配置します。 | |
| bottom | ボックスの領域の下端に揃えて配置します。 | |
| center | ボックスの領域の中央に揃えて配置します。 | |
| left | ボックスの領域の左端に揃えて配置します。 | |
| right | ボックスの領域の右端に揃えて配置します。 |
背景画像を表示する位置は、background-positionプロパティで指定します。 背景画像の位置には、数値,数値（%)、top、bottom、center、left、rightのいずれかを指定します。 背景画像を繰り返して表示する場合は、繰り返しの基点を指定することになります。
■画像の位置を数値で指定する場合
背景画像の位置を数値で指定する場合は、対象となる要素のボックス領域枠線の内側の左上を基点として、
(body要素に指定した場合は、プラウザの表示領域の左上が基点）、左からの距離（横方向の位置）と上からの距離（縦方向の位置）
を半角スペースで区切って指定します。距離はｐｘなどの単位を付けて表します。単位には主にｐｘが使われます。
たとえば「bockground-position:50px 70px」と指定します。
■画像の位置を数値（％）で指定する場合
背景画像の位置を数値（％）で指定する場合も同様に、対象となる要素のボックス領域の左上を基点と
して、左からの距離（横方向の位置）と上からの距離（縦方向の位置）を半角スペースで区切って指定します。距離はボックス領域
の幅あるいは高さに対する割合で指定します。数値（％）で指定する場合は、ボックス領域の幅および高さの位置と背景画像の位置が
そろうように表示されます。
たとえば、「background-position:70% 20%」と指定した場合、横方向の位置は、ボックス領域幅の70％の位置と背景画像の幅の70％
の位置が重なって表示されることになります。従って「background-position:100％ 100％」と指定した場合には、ボックス領域の
右下と、背景画像の右下が重なることになります。
なお、値を1つだけ指定したときは、左からの距離になり、上からの距離は「50％」になります。また、ｔｏｐからｒｉｇｈｔの値を
1つだけ指定したときは、もう一方の値は「ｃｅｎｔｅｒ」になります。数値と数値（％）を組み合わせ
て指定することもできます。
数値または数値（％）と、ｔｏｐからｒｉｇｈｔの値を組み合わせて指定することはできません。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<style type="text/css">
<!--
#sampl01{width:200px;
height:200px;
border:1px solid gray;
background-image:url("背景画像URL" );
background-color:azure;
background-repeat:no-repeat;
background-position:70% 20%;
float:left;
margin-right:5px
}
#sampl02{width:200px;
height:200px;
border:1px solid gray;
background-image:url("背景画像URL");
background-color:azure;
background-repeat:no-repeat;
background-position:top;
float:left;
margin-right:5px
}
#sampl03{width:200px;
height:200px;
border:1px solid gray;
background-image:url("背景画像URL");
background-color:azure;
background-repeat:no-repeat;
background-position:bottom;
float:left;
margin-right:5px;
}
#sampl04{width:200px;
height:200px;
border:1px solid gray;
background-image:url("背景画像URL" );
background-color:azure;
background-repeat:no-repeat;
background-position:center;
float:left;
margin-right:5px;
margin-left:30px;
}
#sampl05{width:200px;
height:200px;
border:1px solid gray;
background-image:url("背景画像URL" );
background-color:azure;
background-repeat:no-repeat;
background-position:left;
float:left;
margin-right:5px;
margin-left:20px
}
#sampl06{width:200px;
height:200px;
border:1px solid gray;
background-image:url("背景画像URL" );
background-color:azure;
background-repeat:no-repeat;
background-position:right;
float:left;
margin-right:5px;
margin-left:37px
}
.float{float:left}
.clear{clear:left}
hr {border:none}
-->
</style>
</head>
<body>
<div id="sampl01">
<div class="box">
</div>
</div>
<p class="float">幅200px、高さ200pxのボックス
枠線1px
背景画像80px×80px
background-position:70% 20%
background-repeat:no-repeat
の表示例</p>
<div id="sampl05">
</div>
<p >幅200px、高さ200pxのボックス
枠線1px
背景画像80px×80px
background-position:left
background-repeat:no-repeat
の表示例</p>
<hr class="clear">
<div id="sampl02">
</div>
<p class="float">幅200px、高さ200pxのボックス
枠線1px
背景画像80px×80px
background-position:top
background-repeat:no-repeat
の表示例</p>
<div id="sampl06">
</div>
<p>幅200px、高さ200pxのボックス
枠線1px
背景画像80px×80px
background-position:right
background-repeat:no-repeat
の表示例</p>
<hr class="clear">
<div id="sampl03">
</div>
<p class="float">幅200px、高さ200pxのボックス
枠線1px
背景画像80px×80px
background-position:bottom
background-repeat:no-repeat
の表示例</p>
<div id="sampl04">
</div>
<p>幅200px、高さ200pxのボックス
枠線1px
背景画像80px×80px
background-position:center
background-repeat:no-repeat
の表示例</p>
<hr class="clear">
</body>
</html>
