BACKGROUND : background-position



記述形式 background-position : percentage | length | キーワード;
適用 block-level & replaced elements
使用方法 親要素に対して背景画像の表示位置を設定する。
    指定方法 : background-position: 縦方向 横方向
縦方向 と 横方向 の間には半角スペースを入れます。
当然のことながら backgroung-image , backgroung-repeat と同時指定します。

percentage : デフォルト。パーセンテージ指定。
    [ 例 ] : background-position: 100% 100%;

length : 単位による指定。
    [ 例 ] : background-position: 300px 100px;

キーワード : 以下のキーワードで位置を設定。
    縦方向 : top , center , bottom
    横方向 : left , center , right
    [ 例 ] : background-position: top center;
実行例

背景画像
    :ie.gif
    :nn.gif
<DIV STYLE="background-image:url(nn.gif); background-repeat:repeat-x; background-position:50% 50%"> コメント </DIV>
CSS とは Cascading Style Sheet の略で、今までの HTML では不可能だった ドキュメント中のオブジェクトのレイアウトを自由に扱えるものです。 まぁ 自由といってもスタティックなもので、ダイナミックに扱いたい場合は JavaScript 等のスクリプト言語と組み合わせて使うと可能です。

<DIV STYLE="background-image:url(ie.gif); background-repeat:no-repeat; background-position:top right"> コメント </DIV>
CSS とは Cascading Style Sheet の略で、今までの HTML では不可能だった ドキュメント中のオブジェクトのレイアウトを自由に扱えるものです。 まぁ 自由といってもスタティックなもので、ダイナミックに扱いたい場合は JavaScript 等のスクリプト言語と組み合わせて使うと可能です。

※ 認識しやすいように color を設定しています。
サポート
ブラウザ
OSpropertyIE3.xIE4.xIE5.0xIE5.5xNN4.xNN6.x
Winlength××
percentage××
キーワード××
Maclength--×
percentage--×
キーワード--×
Unixlength----×
percentage----×
キーワード----×
Win 版 IE4.x 以外は background-repeat の値に no-repeat 以外を指定すると表示がおかしくなります。