TOPページ >  文章を修飾する(背景色、画像、枠ect...), 画像を表示する > 段落の背景に指定した画像を繰返し表示する

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

段落の背景に指定した画像は、繰返し表示(タイリング)させることができます。サンプルの画像はこちらですが、これを上下方向に繰返し表示させてみます。

パリ、1870年代。オペラ座では"ファントム"(オペラ座の怪人)のしわざとされる謎の事件が続いていた。
リハーサル中での事故で、プリマドンナの代役を務めることになったクリスティーヌは、その初主演のステージで喝采を浴び、観客の中にいた幼馴染のラウルと再開する。
だが、その喜びも束の間、仮面をかぶった謎の怪人、ファントムに...

ソースは、下記のようになります。赤字部分で背景画像の繰返しを指定しています。

<p style="background-image:url(./sample/cat.gif);background-repeat:repeat-y">
パリ、1870年代。オペラ座では"ファントム"(オペラ座の怪人)のしわざとされる謎の事件が続いていた。<br>リハーサル中での事故で、プリマドンナの代役を務めることになったクリスティーヌは、その初主演のステージで喝采を浴び、観客の中にいた幼馴染のラウルと再開する。<br>だが、その喜びも束の間、仮面をかぶった謎の怪人、ファントムに...
</p>

繰返し方法の指定は、下記のキーワードから選べます。

repeat上下左右にパターンを繰り返す
(通常の繰返し)
repeat-x左右にパターンを繰り返す
repeat-y上下にパターンを繰り返す
no-repeat繰り返さない

トラックバック

このエントリーのトラックバックURL:
http://www.appelle.jp/mt/mt-tb.cgi/72

コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)