CSS 背景画像の繰り返し方法を指定するサンプル(background-repeat)

CSSの背景画像の繰り返し方法を指定するサンプルです。
background-repeatプロパティまたはbackgroundプロパティを使用します。

background-repeat / background プロパティ

background-repeat : 値
background : 値
説明
repeat 横と縦で繰り返します。(初期値)
repeat-x 横に繰り返します。
repeat-y 縦に繰り返します。
space 領域に合わせて表示します。画像の間にスペースを入れて表示します。
round 領域に合わせて表示します。画像のサイズを調整します。
no-repeat 繰り返しません。
値を継承しない

コード

サンプルのコードです。
3-18行目は、background-repeatプロパティを使用しています。
21行目は、backgroundプロパティを使用しています。backgroundプロパティは値を複数指定できます。(例:画像の場所とrepeat指定)

<style>
#box1{
	background-repeat:repeat;
}
#box2{
	background-repeat:repeat-x;
}
#box3{
	background-repeat:repeat-y;
}
#box4{
	background-repeat:space;
}
#box5{
	background-repeat:round;
}
#box6{
	background-repeat:no-repeat;
}
#box7{
	background:url(./images/test1.png) repeat;
}
div{font-weight:bold;background-image:url(./images/test1.png);
margin-bottom:5px;border:1px solid #000;width:200px;height:100px;}
</style>
<body >
<div id="box1">repeat</div>
<div id="box2">repeat-x</div>
<div id="box3">repeat-y</div>
<div id="box4">space</div>
<div id="box5">round</div>
<div id="box6">no-repeat</div>
<div id="box7">repeat</div>
</body>

サンプル

上記コードのサンプルです。

関連の記事

CSS 背景色を指定するサンプル(background-color)
CSS 背景画像を指定するサンプル(background-image)
CSS3 枠線の角を丸くするサンプル(border-radius)
CSS3 ボックスに影をつけるサンプル(box-shadow)
CSS3 文字に影をつけるサンプル(text-shadow)
CSS3 透明度を指定するサンプル(opacity)
CSS3 線のグラデーションのサンプル(linear-gradient)
CSS3 円のグラデーションのサンプル(radial-gradient)



△上に戻る