背景画像を定義するときに、その繰り返し方も定義することができます。
次の、１〜３の繰り返し方を、定義してみてください。
１．ｘ軸方向にのみ繰り返す（
background-repeat:
repeat-x）
２．ｙ軸方向にのみ繰り返す（
background-repeat:
repeat-y）
３．背景画像を繰り返さない（
background-repeat:
no-repeat）
手ごろな背景画像が無い場合は、下の画像をダウンロードして使用してください。
１．ｘ軸方向に繰り返したボックス（.box1）
３．
繰り返さない設定をしたボックス（.box3）
.box1{
width: 150px;
height: 80px;
padding: 10px 0px 0px 10px;
border: solid #FF9999 1px;
background:url(img/haikei2.gif);
background-repeat:repeat-x;
}
上の定義は、ｘ軸方向にのみ、背景画像を繰り返すボックスのものです。
問題内の、属性と背景を、書き込んでやればいいのでかんたんですよね。
２、３も同じように書き込んであげればいいわけですが、
背景画像の繰り返し方の定義を知っておけば、
いろいろと応用が効くので、ためしてみてくださいね。
.box2{
width: 150px;
height: 80px;
padding: 10px 0px 0px 10px;
border: solid #FF9999 1px;
background:url(img/haikei2.gif);
background-repeat:repeat-y;
}
上の定義は、ｙ軸方向にのみ繰り返すボックスのもの。
.box3{
width: 150px;
height: 80px;
padding: 10px 0px 0px 10px;
border: solid #FF9999 1px;
background:url(img/haikei2.gif);
background-repeat:no-repeat;
}
これは、背景画像を繰り返さない、定義をしたボックスのもの。
この定義方法は、次のページでも使いますので、
覚えておいてほしいです。
