構文

background-position : 横位置 縦位置;

説明文

　「background-position」，background-imageで指定した背景画像の表示位置を指定できる。

　表示位置は，要素のPadding領域の左上を基準にして横，縦方向にピクセル数（px）で指定する。すると指定した位置に画像の左上を合わせて表示される。例えば，横100px，縦50pxの位置に表示する場合は以下のように指定する。

backgorund-position : 100px 50px;

　また，割合で指定することも可能だ。この場合は，要素の横および縦方向に左上からの指定した割合の位置に表示する。また，画像の横および縦方向に左上からの指定した割合の位置を背景の表示位置と合わせて表示する。

　例えば，以下のように指定した場合を考える。

backgorund-position : 50% 30%;

　この場合は，横方向の表示位置は，要素の半分の位置（50%）と画像の半分の位置を合わせるように表示が行われる。同様に縦方向は要素および画像の上から30%の位置を合わせるようにする。

　さらに，以下のような配置を表す表記も利用できる。

配置意味
left要素の左に合わせて画像を表示する
right要素の右に合わせて画像を表示する
top要素の上に合わせて画像を表示する
bottom要素の下に合わせて画像を表示する
center要素の中央に画像を表示する

　例えば，右下に表示したい場合は，以下のように指定する。

backgorund-position : right bottom;
[画像のクリックで拡大表示]
[画像のクリックで拡大表示]

使用例

● CSSの定義

body { background-position : bottom right; 
       background-image : url('bgright.jpg');
       background-repeat : no-repeat; }

div.top { background-position : 40px 10px;
          background-image : url('logo.gif');
          background-repeat : no-repeat;
          background-color : #9b9ca1; 
          height : 90px; }

● HTMLの例

<div class="top">
</div>
<p>日経LinuxではLinuxの活用方法や便利なリファレンスなどを公開していま
す。</p>
<h2>日経Linuxのコンテンツ</h2>
<ul>
    <li><a href="a.html">Linuxディストリビューション</a></li>
    <li><a href="b.html">インストール完全ガイド</a></li>
    <li><a href="c.html">コマンドリファレンス</a></li>
    <li><a href="d.html">シェルスクリプトリファレンス</a></li>
    <li><a href="e.html">HTMLリファレンス</a></li>
    <li><a href="f.html">CSSリファレンス</a></li>
</ul>

● 表示結果

Internet Explorerの表示例
[画像のクリックで拡大表示]
Firefoxの表示例
[画像のクリックで拡大表示]

関連項目