Loose-Info.com

Last Update 2019/12/25


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">&nbsp;</P> </TD> <TD class="test2"> <P style="line-height: 200px">&nbsp;</P> </TD> </TR> <TR> <TD class="test3"> <P style="line-height: 200px">&nbsp;</P> </TD> <TD class="test4"> <P style="line-height: 200px">&nbsp;</P> </TD> </TR> </TABLE> </BODY> </HTML>