構文

background-repeat : 繰り返し;

説明文

　background-imageでは，背景の画像を指定できる。しかし，要素に対して背景画像が小さいと，要素の一部にしか背景画像が表示されない。

　そこで，「background-repeat」で画像を繰り返し表示して背景領域を画像で埋めることができる。例えば，要素の左側に星を並べて表示するといったことも行える。

　background-repeatでは以下のような繰り返し方法を指定できる。

繰り返し方法意味
no-repeat画像の繰り返しは行わず，背景に1枚の画像を表示する
repeat-x横方向に繰り返しを行う
repeat-y縦方向に繰り返しを行う
repeat縦および横方向に繰り返しを行い，要素の背景を画像で埋め尽くす

使用例

● CSSの定義

body { background-repeat : repeat-y;
       background-image: url('bgleft.jpg'); 
       background-position : left; }
div.mokuji { background-repeat : repeat-x;
             background-image: url('bgbottom.jpg'); 
             background-position : bottom; 
             background-color : #ffffff;
             padding : 10px;
             border : solid 2px #404040;
             width : 250px;
             height : 100px; }
h2 { margin : 0; 
     text-align : center;}
ul { margin : 0; }

● HTMLの例

<h1>ストレージサービスの使い方</h1>
<p>ファイルをインターネットを介して送りたい場合，ストレージサービスが
便利です。メールで送れないような容量の大きなファイルであってもやりとり
を行うことができます。また，データのバックアップ領域として利用すること
も可能です。</p>
<div class="mokuji">
<h2>目次</h2>
<ul>
    <li><a href="1.html">ストレージサービスとは</a></li>
    <li><a href="2.html">代表的なストレージサービス</a></li>
    <li><a href="3.html">ストレージサービスに登録する</a></li>
    <li><a href="4.html">ストレージサービスを利用する</a></li>
</ul>
</div>

● 表示結果

Internet Explorerの表示例
[画像のクリックで拡大表示]
Firefoxの表示例
[画像のクリックで拡大表示]

関連項目