TOPページ >  文章を修飾する(背景色、画像、枠など...), 画像を表示する/動画/サウンド > 文字や文章、テーブルなどの背景画像の位置を指定する

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

文字や文章、テーブルなどの背景画像に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 』とすると、左右位置は段落の左端、上下位置は段落の中央、という指定になります。

ランキングに参加中です! お役に立てたらクリックをお願いします→

同一カテゴリ内一覧
フィールド指定して文章を枠で囲む
文字や文章、画像の行揃えを指定する
文章や文字、画像を囲む枠の太さ、色、種類をまとめて指定する
文章や文字、画像を囲む枠の種類を指定する
文字や文章、画像を囲む枠の色を指定する
文章や文字、画像を枠で囲む
マージンとパディングの違い
余白を入れる(パディング)
余白を入れる(マージン)
改行する/改行を禁止する
文章の背景色、背景画像、配置方法をまとめて指定する
文字や文章、テーブルなどの背景画像の位置を指定する
文章の背景に画像を固定表示する
文章の背景に指定した画像を繰返し表示する
段落文章の横幅を指定する
文章の行間隔を指定する
文章の背景画像を指定する
文章の背景色を指定する
IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス