TOPページ >  文章を修飾する(背景色、画像、枠など...), 画像を表示する/動画/サウンド > 文章の背景に指定した画像を繰返し表示する

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

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

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

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

<div style="background-image:url(sample/cat.gif);
background-repeat:repeat-y">
この段落は、背景画像を指定しています。元画像は50x50ピクセルの<br>
ねこの画像です。これをy(上下)方向に繰返し表示させています。<br>
ちなみにこのブログは、bodyタグに背景画像のタイリングを<br>
しています。文字を少しずつずらしつつ、タイリングしたときに文字が<br>
つながっているように見えるように画像をつくるのは面白いものです。
</div>
この段落は、背景画像を指定しています。元画像は50x50ピクセルの
ねこの画像です。これをy(上下)方向に繰返し表示させています。
ちなみにこのブログは、bodyタグに背景画像のタイリングを
しています。文字を少しずつずらしつつ、タイリングしたときに文字が
つながっているように見えるように画像をつくるのは面白いものです。

ランキングに参加中です! お役に立てたらクリックをお願いします→

同一カテゴリ内一覧
フィールド指定して文章を枠で囲む
文字や文章、画像の行揃えを指定する
文章や文字、画像を囲む枠の太さ、色、種類をまとめて指定する
文章や文字、画像を囲む枠の種類を指定する
文字や文章、画像を囲む枠の色を指定する
文章や文字、画像を枠で囲む
マージンとパディングの違い
余白を入れる(パディング)
余白を入れる(マージン)
改行する/改行を禁止する
文章の背景色、背景画像、配置方法をまとめて指定する
文字や文章、テーブルなどの背景画像の位置を指定する
文章の背景に画像を固定表示する
文章の背景に指定した画像を繰返し表示する
段落文章の横幅を指定する
文章の行間隔を指定する
文章の背景画像を指定する
文章の背景色を指定する
IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス