×

[PR]この広告は3ヶ月以上更新がないため表示されています。
ホームページを更新後24時間以内に表示されなくなります。

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 背景画像のリピートの仕方を指定する 

戻る

TOP

WEB SEARCH
MENU
CONTENTS
digilog.TOP
digilog.HTML
digilog.CSS
digilog.SEO
digilog.img