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

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

background-repeat / background プロパティ

background-repeat : 値
background : 値

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

背景画像の繰り返し方法を指定します。
以下はMDNのbackground-repeatプロパティのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/background-repeat
以下はMDNのbackgroundプロパティのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/background

コード

サンプルのコードです。
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>

サンプル

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