文章の背景に指定した画像を繰返し表示する

ホームページやブログなどのHTML言語を使用したウェブサイトで 文章の背景に画像を指定した場合、これを繰返し表示（タイリング）させることができます。上下左右にタイリング、縦方向のみの繰返し、横方向のみの繰返しから選択できます。

<タグ名 style="background-repeat:繰返し方法">背景画像を表示する文章</タグ名>
  1. タグ名： P や DIV、SPAN などが一般的ですが、その他にもほとんどのブロックタグおよびインラインタグが使用可能です。
  2. 繰返し方法：繰返し方法は、下記の中から指定できます。
    キーワード繰返し方法
    repeat 上下左右にパターンを繰り返す（通常の繰返し）
    repeat-x 左右にパターンを繰り返す
    repeat-y 上下にパターンを繰り返す
    no-repeat 繰り返さない

 

 

サンプルソースです。元画像は、この50ｘ50ピクセルの小さな画像ですが、これを y（上下）方向に繰返し表示させます。

 

<div style="background-image:url(sample/cat.gif);
background-repeat:repeat-y">

この段落は、背景画像を指定しています。元画像は50ｘ50ピクセルの<br>
ねこの画像です。これをｙ（上下）方向に繰返し表示させています。<br>
ちなみにこのブログは、bodyタグに背景画像のタイリングを<br>
しています。文字を少しずつずらしつつ、タイリングしたときに文字が<br>
つながっているように見えるように画像をつくるのは面白いものです。
</div>
この段落は、背景画像を指定しています。元画像は50ｘ50ピクセルの
ねこの画像です。これをｙ（上下）方向に繰返し表示させています。
ちなみにこのブログは、bodyタグに背景画像のタイリングを
しています。文字を少しずつずらしつつ、タイリングしたときに文字が
つながっているように見えるように画像をつくるのは面白いものです。