background-position 【背景画像開始位置】
[IE5] [IE6] [IE7] [Fx1] [Fx2] [Op6] [Op7] [Ns6] [Ns7]
background-positionプロパティは、背景画像の表示開始位置を指定する事が出来ます。値を横方向・縦方向の順にスペースで区切ってそれぞれ指定する事も出来ます。
※background-position-x、background-position-yはIE独自の仕様です。
開始位置を直接指定する
横位置を left、center、right、縦位置を top、center、bottom で指定します。
この指定方法はそれぞれ、0％、50％、100％と指定しているのと同じです。
『％』で指定する
背景画像が表示される要素の左上からの距離を横方向、縦方向の順に『％』で指定出来ます。
【例】background-position: 50% 50%;
と指定した場合、表示される領域の左端から50％、上端から50％の位置が背景画像の表示開始位置となります。
数値で指定する
背景画像が表示される要素の左上からの距離を横方向、縦方向の順に『px』などの数値で指定出来ます。マイナス値も設定する事が出来ます。
background-positionの使用例
CSSファイル
.bgsp004 {
width: 300px;
height: 300px;
background-image: url(images/backsample.gif);
background-position: 100px 100px;
background-repeat: no-repeat;
background-color: #ddffff;
}
HTMLソース
<p class="bgsp004">
background-positionプロパティ使用例<br />
背景画像開始位置の指定サンプルです。<br />
</p>
表示すると
background-positionプロパティ使用例
背景画像開始位置の指定サンプルです。
背景関連項目
| background | 背景に関する指定をまとめて行う |
| background-attachment | 背景画像の固定・移動を指定する |
| background-color | 背景色を指定する |
| background-image | 背景画像を指定する |
| background-position(x y) | 背景画像の表示開始位置を指定する |
| background-repeat | 背景画像のリピートの仕方を指定する |
