背景画像の位置を指定して表示    
       
  背景画像を指定した位置に表示したい場合があります。

例えば左の画像の基本単位(画像ファイル)はこれです-->  

この画像を背景画像として希望の位置(上端・中央・下端・右端・左端)に表示するためには『スタイルシート』を用いて、次のように記述する必要があります。

以下の部分を<head>〜</head>の中に記述して下さい。
 
<style type="text/css">
<!--
body {background-image:url('表示させたい画像ファイルのファイル名');
        background-position:設定したい位置;
        background-repeat:繰り返しの方法を指定;}
-->
</style>

『設定したい位置』という部分には次のように指定します。
以下の各表記法にリンクされたページは、繰り返し指定の方法を『no-repeat』で指定したものです。
リンクを辿って確認してみて下さい。

表記法 説      明
top 上端に表示
center 中央に表示
bottom 下端に表示
right 右端に表示
left 左端に表示

『繰り返しの方法を指定』という部分には次のように指定します。

表記法 説      明
repeat 画面いっぱいに繰り返して表示(省略した場合にはこれが指定される)
repeat-x 横方向に繰り返して表示
repeat-y 縦方向に繰り返して表示
no-repeat 繰り返さず一点だけ表示

縦長や横長の画像を一つだけ、指定の位置に表示させたい場合には、設定したい位置に上の表(top・center・bottom・right・leftの中)から選択し、尚かつ、繰り返しの方法の部分に『no-repeat』を記述します。
 

 
       
  FAQのページへ