Last Update 2007/01/16
TOP - CSS1(Cascading Style Sheets, level 1) - background-position
背景のイメージの画面上での位置を指定します。
パーセント、数値、キーワードでの記述が可能です。
パーセント、数値、キーワードでの記述が可能です。
キーワード(垂直方向・イメージ上端位置)
top : 上端合わせ
center : 中央合わせ
bottom : 下端合わせ
キーワード(水平方向・イメージ左端位置)
left : 左端合わせ
center : 中央合わせ
right : 右端合わせ
(例)
使用画像 : background_s.gif
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<TITLE>テスト</TITLE>
<STYLE type="text/css">
<!--
TD.test1
{
background-image: url(background_s.gif);
background-repeat: no-repeat;
background-position: 100% 100%
}
TD.test2
{
background-image: url(background_s.gif);
background-repeat: no-repeat;
background-position: 50% 50%
}
TD.test3
{
background-image: url(background_s.gif);
background-repeat: no-repeat;
background-position: 50px 50px
}
TD.test4
{
background-image: url(background_s.gif);
background-repeat: no-repeat;
background-position: top center
}
-->
</STYLE>
</HEAD>
<BODY>
<TABLE width="600" border="1" cellspacing="0">
<TR>
<TD class="test1">
<P style="line-height: 200px"> </P>
</TD>
<TD class="test2">
<P style="line-height: 200px"> </P>
</TD>
</TR>
<TR>
<TD class="test3">
<P style="line-height: 200px"> </P>
</TD>
<TD class="test4">
<P style="line-height: 200px"> </P>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>