<< スタイルシート(CSS) background-image | Home | スタイルシート(CSS) background-position >>

スタイルシート(CSS) background-repeat

前回のbackground-imageでは、背景画像の指定をやりました。
今回はcolorimageに続くbackgroundプロパティの解説です。
今回のbackground-repeatプロパティは、背景画像を指定しているときに、表示の仕方を指定するのに使用します。

background-repeat: 値;

値には次のような「表示の仕方」を指定します。
repeat: 繰返し表示する。初期値
repeat-x: 横方向だけ繰返し表示
repeat-y: 縦方向に繰返し表
no-repeat: 繰り返さずに1度だけ表示

それでは300×300のボックスに下のような50×50の画像を背景画像として表示してみましょう。
背景画像


背景画像に「background-repeat:repeat;」を指定。または指定しなくてもこのように表示されます。



背景画像に「background-repeat:repeat-x;」を指定



背景画像に「background-repeat:repeat-y;」を指定



背景画像に「background-repeat:no-repeat;」を指定


background-repeatプロパティは、背景にbackground-imageで指定した画像にのみ適用されるので、background-repeatとbackground-imageは対で使用することになります。
まとめて指定することも出来ますが、それは次回以降で解説します。

Calendar

  12345
6789101112
13141516171819
20212223242526
2728293031  
<< August 2017 >>

Recent Entries


Categories


Archives


Profile


Valid XHTML 1.0 Transitional

Valid CSS!

Comments

Leave Comment










Trackbacks

Trackback URL

Recent Comments

Recent Trackbacks