文字や文章、テーブルなどの背景画像の位置を指定する

文字や文章、テーブルなどの背景画像にBACKGROUND-IMAGE を使って背景画像を指定した際に、背景画像の表示位置を指定することができます。

<タグ名 style="background-position:背景画像表示位置">～</タグ名>
  1. タグ名：P や DIV、SPAN タグなどが一般的ですが、他にもほとんどのブロックタグおよびインラインタグが使用可能です。
  2. 背景画像表示位置：背景画像の表示位置を、下記の絶対サイズ、相対サイズまたはキーワードから指定することができます。
    指定方法表示位置
    絶対サイズ、
    相対サイズ    		 表示領域の右上から、背景画像の左上までの距離を横距離、縦距離の順番で指定
    ％ 表示領域の各辺から、背景画像の各辺までの距離を、左右の距離合計に対する左側距離の比率、上下距離の合計に対する上側距離の比率、の順番で指定
    キーワード 左右の配置（left , right , center）、上下の配置（top , bottom , center）の順番で指定
    絶対サイズ、相対サイズは以下の単位が使用できます。相対サイズは、その場面で使われている書体のサイズが基準です。
    絶対サイズ意味
    in インチ（ 1 in = 25.4 mm ）
    cm センチメートル
    mm ミリメートル
    pt ポイント（ 1 pt = 1/72 in）
    pc パイカ（ 1 pc = 12 pt ）
    px※ ピクセル（表示上の 1 ドット幅）
    相対サイズ意味
    em 基準書体の文字の高さ
    ex 基準書体の文字 x の高さ
    % 基準書体のサイズに対する百分率
    ※正確にはデバイス依存の相対サイズ

サンプルソースです。

<div style="background-position:60px 30px;background-image:url(./sample/cat.gif);
background-repeat:no-repeat;">
背景画像の位置を指定して表示することができます、このサンプルでは、表示可能領域の右端から60ピクセル、上端から30ピクセルの位置に指定しています。ちょっと指定方法がややこしいですが、この指定は左右の配置と上下の配置を半角スペースを挟んで併記します。2つセットです。
</div>

このサンプルを表示させると、次のようになります。

背景画像の位置を指定して表示することができます、このサンプルでは、表示可能領域の右端から60ピクセル、上端から30ピクセルの位置に指定しています。ちょっと指定方法がややこしいですが、この指定は左右の配置と上下の配置を半角スペースを挟んで併記します。2つセットです。

例えば、上記の例で『 60px 30px 』としていたところを、『 right center 』とすると、左右位置は段落の左端、上下位置は段落の中央、という指定になります。