メインメニュー


［スポンサードリンク］
HOME CSS - 機能別 背景
HOME CSS - プロパティ別 B
背景画像の表示位置を設定する
background-position:表示位置
表示位置：
単位つきの数値 左上を基点にした位置を指定
% 左上を基点にした位置を指定
left 左端
right 右端
center 中央
top 上端
bottom 下端

background-positionプロパティで、背景画像の表示位置を設定します。
表示位置を示す値を1つ指定する方法と、2つ指定する方法があります。

　・値を1つのみ指定　…　横位置と縦位置で同一の値が設定されます
　　　　　background-position:20%

　・値を2つ指定　…　横位置・縦位置の順に半角スペースで区切って指定し、それぞれ別の値が設定されます。
　　　　　background-position:200px 50px

単位つきの数値は、ボックス領域の左上から画像の左上までの位置を指定します。
この場合、ボックス領域の大きさが変わったとき(ウィンドウサイズの違いなど)でも固定されて同じ位置に配置されます。
詳しいことは、『単位の指定方法』を御覧ください。

%(パーセント)は、ボックス領域の幅と高さに対しての割合で位置を指定します。
この場合、ボックス領域の大きさが変わったとき(ウィンドウサイズの違いなど)は、その領域に対しての割合で移動して配置されます。

キーワード「left，right，center，top，bottom」による指定が1つしかなかった場合、もう一方はcenterになります。

単位つきの数値・パーセント・キーワードによる指定は、混在して指定することができます。
 　background-position:100px 50%

背景画像を指定した位置に1箇所だけ(繰り返さずに)表示させたい場合は、background-repeatプロパティでno-repeatを指定します。
この指定がない場合は、指定した位置を基点に繰り返して敷き詰められます。
詳しいことは、『背景画像の並び方を設定する』を御覧ください。


別窓にサンプルを表示します
　　

<STYLE type="text/css">
<!--
BODY { background-image : url(img/phot1-1.png);
       background-repeat: no-repeat;
       background-position:80% 50px;
}
-->
</STYLE>

<BODY>
<H4><B>background-position(背景画像の表示位置を設定する)</B></H4>
<BR>
画像の表示位置は、background-position:80% 50px;　です。<BR>
　　　　　　　　　　　　　　　　　　　↑　↑<BR>
　　　　　　　　　　　 　　　　 　横位置　縦位置<BR><BR><BR><BR>
位置をパーセントで指定していると、画面のサイズによって表示される位置が変わります。
</BODY>

left right center
　 　 　
top bottom bottom right
　 　 　

<STYLE type="text/css">
<!--
.case1 { background-image : url(img/b_music.png);
         background-repeat: no-repeat;
         background-position:left;
}
.case2 { background-image : url(img/b_music.png);
         background-repeat: no-repeat;
         background-position:right;
}
.case3 { background-image : url(img/b_music.png);
         background-repeat: no-repeat;
         background-position:center;
}
.case4 { background-image : url(img/b_link.png);
         background-repeat: no-repeat;
         background-position:top;
}
.case5 { background-image : url(img/b_link.png);
         background-repeat: no-repeat;
         background-position:bottom;
}
.case6 { background-image : url(img/b_link.png);
         background-repeat: no-repeat;
         background-position:bottom right;
}
-->
</STYLE>

<TABLE border="1" width="100%">
<TR>
<TD align="center" width="33%">left</TD>
<TD align="center" width="33%">right</TD>
<TD align="center" width="33%">center</TD>
</TR>
<TR>
<TD height="100" class="case1" width="33%">　</TD>
<TD height="100" class="case2" width="33%">　</TD>
<TD height="100" class="case3" width="33%">　</TD>
</TR>
<TR>
<TD align="center" width="33%">top</TD>
<TD align="center" width="33%">bottom</TD>
<TD align="center" width="33%">bottom right</TD>
</TR>
<TR>
<TD height="100" class="case4" width="33%">　</TD>
<TD height="100" class="case5" width="33%">　</TD>
<TD height="100" class="case6" width="33%">　</TD>
</TR>
</TABLE>