background-repeat プロパティ。
CSSに於ける要素の背景画像の並べ方・background-repeat プロパティに関する解説です。
background-repeat プロパティとは。
background-repeat プロパティは、要素の背景画像の並べ方です。
背景画像が当該要素より小さい場合、画像を並べて表示したりしますが、それを制御するプロパティです。
background-repeat プロパティの書式。
CSS第二水準までの書式。
CSS第二水準(CSS 2.x)までのbackground-repeat プロパティの書式は、以下のようになります。
background-repeat: 値値としては、以下のものが取れます。
CSS第三水準からの書式。
CSS第三水準(CSS 3)からのbackground-repeat プロパティの書式は、以下のようになります。
-
background-repeat:値XY縦方向及び横方向に同じ値を取るか、または第二水準までの書式と互換性を取るためのものです。
- 当然、第二水準までで定められている値も取れます。
-
background-repeat:値X 値Y横方向の値と、縦方向の値をそれぞれ別個に指定するもので、第二水準までとは互換性がないものです。
この場合、前者が横方向、後者が縦方向となります。
複数画像を用いる場合は、background-image プロパティで指定した順序に従って , で区切って列挙します。この場合、値一つの書式と二つの書式が混在していても構いません。
inherit- 一番近い上位要素での背景画像の並べ方を継承します。
no-repeat- 画像は一枚だけとします。
repeat- 間に隙間を入れる事なく繰返し画像を並べます。
space- 領域に入り切る枚数だけ繰返し画像を並べ、各画像の間には適宜隙間を入れます。
- つまり、領域の端でぶった切られる画像が出ないように並べます。
但し、二枚以上の画像が並べられる領域がない場合は一枚だけ表示される形となります(この場合領域が足りなければ領域の端で切り落とされる可能性もあります)。
round- 領域に入り切る枚数だけ繰返し画像を並べ、隙間が出来るようであれば適宜拡大します。
- つまり、領域の端でぶった切られる画像が出ないように並べます。
第三水準以降の場合のデフォルトは、第二水準までと同様、縦横双方に repeat 値、すなわち隙間なく並べると言うものです。
background-repeat プロパティの記述例。
例えば、<body>要素の一番下に、横方向にのみ背景画像「Tulip.GIF」を隙間なく並べる場合は、
body {background-image: url('Tulip.GIF');background-repeat: repeat-x;background-position: left bottom;background-color: #8ECDF0;color: #000;}
と記述します。
この記述は、第三水準であれば、
body {background-image: url('Tulip.GIF');background-repeat: repeat no-repeat;background-position: left bottom;background-color: #8ECDF0;color: #000;}
とも記述出来ます。
background-repeat プロパティに関する注意事項。
background-repeat プロパティの使用上の注意。
背景画像を用いる場合の一般的な注意事項。
背景画像を指定して、且つbackground-repeat プロパティで並べ方を指定した場合、以下のいずれかで可読性を損ねる場合があります。
- 背景色もそれに近いものを指定していない
- ユーザエージェントが画像表示をしない設定にしている場合、背景画像が読み込まれず、背景色によって可読性が損なわれる恐れがあります。また、背景画像の並べ方に依っては、背景画像が掛からない部分で可読性を損ねる恐れがあります。
- 前景色(文字の色)を指定していない
- 適切な前景色を指定していないと、背景画像に紛れて読めなくなる恐れがあります。
背景画像を指定する場合は、必ず
colorプロパティで適切な前景色background-colorプロパティで背景画像に近い背景色
も併せて指定しましょう。
第三水準の書式について。
- 以下の記述には、制作者の私見が入ります。
第三水準の書式は、インターネットエクスプローラ 8.0 まででは対応出来ません。
平成23年11月13日現在、IE 8.0 の利用者がかなり多い現状を考慮すると、可能な限り第二水準までの書式で記述した方が安全と思われます。