|
比較的小さな画像ファイルを一つだけ表示したい場合があります。
これまで説明してきたページでは一つの画像を繰り返して表示していましたが、このページでは、敢えて一つだけ表示するようにしています。
例えばここで使っている画像の基本単位(画像ファイル)はこれです-->
標準設定では、背景画像を貼り付けると繰り返し表示してしまいます。
これを実現するためには『スタイルシート』を用いて、次のように記述する(つまり、『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 |
繰り返さず一点だけ表示 |
最下端に画像を一つだけ表示したい場合には、『設定したい位置』という部分に『bottom』を指定し、『繰り返しの方法を指定』という部分には『no-repeat』)を指定します。
<style type="text/css">
<!--
body {background-image:url('表示させたい画像ファイルのファイル名');
background-position:left;
background-repeat:no-repeat;}
-->
</style> |
この例では、左端中央に画像が一つだけ表示されていることが分かると思います。
このような動作をします。
|
|