これまで説明してきたページでは一つの画像を繰り返して表示していましたが、このページでは、敢えて一つだけ表示するようにしています。
いきなり、変な位置に画像（背景画像）がひとつ表示されていると思いますが、これは、以下のスタイルシートを用いて上端中央に表示する設定例をこのファイルで示したためです。
例えばここで使っている画像の基本単位（画像ファイル）はこれです-->
標準設定では、背景画像を貼り付けると繰り返し表示してしまいます。
これを実現するためには『スタイルシート』を用いて、次のように記述する（つまり、『no-repeat』と記述する）必要があります。
以下の部分を<head>〜</head>の中に記述して下さい。
| <style type="text/css"> <!-- body {background-image:url('表示させたい画像ファイルのファイル名'); background-position:設定したい位置; background-repeat:繰り返しの方法を指定;} --> </style> |
| 表記法 | 説 明 |
| top | 上端に表示 |
| center | 中央に表示 |
| bottom | 下端に表示 |
| right | 右端に表示 |
| left | 左端に表示 |
| 表記法 | 説 明 |
| repeat | 画面いっぱいに繰り返して表示（省略した場合にはこれが指定される） |
| repeat-x | 横方向に繰り返して表示 |
| repeat-y | 縦方向に繰り返して表示 |
| no-repeat | 繰り返さず一点だけ表示 |
上端に画像を一つだけ表示したい場合には、『設定したい位置』という部分に『top』を指定し、『繰り返しの方法を指定』という部分には『no-repeat』）を指定します。
| <style type="text/css"> <!-- body {background-image:url('表示させたい画像ファイルのファイル名'); background-position:top; background-repeat:no-repeat;} --> </style> |
この例では、上端中央に画像が一つだけ表示されていることが分かると思います。
このような動作をします。
横長の画像を指定すれば、上端に一つだけ画像を全体的に表示するようなこともできます。