背景画像を縦・横全面に繰り返して表示



比較的小さな画像ファイルを全面(縦・横全面)に繰り返して表示したい場合があります。


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

非常に見難いですが他のページで見たような基本単位の四角い枠からできています。
これを実現するためには『スタイルシート』を用いて、次のように記述する必要があります。

背景画像の使い方の悪い見本のようで本文が非常に読みにくいので、表部分は背景色を別の色で表示することにしました。
以下の部分を<head>~</head>の中に記述して下さい。

<style type="text/css">
<!--
body {background-image:url('表示させたい画像ファイルのファイル名');
        background-repeat:繰り返しの方法を指定;}
-->
</style>

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

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


リンク元はここですが、別ページで開いているので閉じて下さい。