【CSS】 background-repeatを学び背景画像の繰り返しを指定しよう！

シュウ

今回は「【CSS】 background-repeatを学び背景画像の繰り返しを指定しよう！」
についての解説になります！

こんな方に読んでほしい

CSSを学び始めた方へ
background-repeatの使い方について学びたい方へ
repeat、repeat-x、repeat-yでの指定方法について解説しております

上の図のように、赤で囲ったリンゴの背景画像を繰り返しの指定ができます。
repeatプロパティでは「X方向」、「Y方向」などの指定が可能になり、指定方法もとても簡単です

主なbackgroundプロパティ

background-color　
解説の記事ありますよ
指定した要素の背景の色を指定します
background-image　
解説の記事ありますよ
指定した要素の背景画像を指定します
background-repeat　
今回はここを解説！
背景画像の繰り返しを指定します
background-position　
解説の記事ありますよ
背景画像の位置を指定します
background-size　
解説の記事ありますよ
背景画像のサイズを指定します

[記事の内容]

background-repeatについて

基本的な記述方法としては
background-repeat値になります。

指定できる値

repeat
初期値になります:背景画像が繰り返し表示され、指定の要素からはみ出た部分は表示しません
repeat-x
背景画像がX方向「水平」に繰り返し表示されます
repeat-y
背景画像がY方向「垂直」に繰り返し表示されます
space
「repeat」と違い、指定要素からはみ出ないように間隔を調整し表示されます
round
「repeat」と違い、指定要素からはみ出ないように画像サイズを調整し表示されます
no-repeat
背景画像を一回だけ表示してリピートはしません

background-repeat指定方法について

background-repeatは下記のように指定します。

セレクタ {
	background-repeat: 値;
}

ただし、background-repeatプロパティだけでは使用しません。
背景画像を指定する「background-image」などと組み合わせて使用します。

repeatについて

repeat
初期値になります:背景画像が繰り返し表示され、指定の要素からはみ出た部分は表示しません

repeat指定

repeat指定について

<div class="inner">
	<div class="box">repeat指定について</div>
</div>

.inner {
	color: #fff;
	background-color: #24422b;　　/* 親要素の背景色を指定 */
	padding: 20px;
}
.box {
	width: 80%;
	padding: 120px 0px;
	text-align: center;
	margin: 0 auto;
	border: solid 2px #ffffff;
	background-image: url(画像のパス); /* 背景画像の指定 */
    background-repeat: repeat;　　　　/* 背景画像の繰り返しの指定 */
}

repeat-xについて

repeat-xについて
背景画像がX方向「水平」に繰り返し表示されます

repeat-x指定

repeat-x指定について

<div class="inner">
	<div class="box">repeat-x指定について</div>
</div>

.inner {
	color: #fff;
	background-color: #24422b;　　/* 親要素の背景色を指定 */
	padding: 20px;
}
.box {
	/*--省略--*/
	background-image: url(画像のパス); 　/* 背景画像の指定 */
    background-repeat: repeat-x;　　　　/* 背景画像の繰り返しの指定 */
}

repeat-yについて

repeat-yについて
背景画像がY方向「垂直」に繰り返し表示されます

repeat-y指定

repeat-y指定について

<div class="inner">
	<div class="box">repeat-y指定について</div>
</div>

.inner {
	color: #fff;
	background-color: #24422b;　　/* 親要素の背景色を指定 */
	padding: 20px;
}
.box {
	/*--省略--*/
	background-image: url(画像のパス); 　/* 背景画像の指定 */
    background-repeat: repeat-y;　　　　/* 背景画像の繰り返しの指定 */
}

spaceについて

spaceについて
「repeat」と違い、指定要素からはみ出ないように間隔を調整し表示されます

space指定

space指定について

<div class="inner">
	<div class="box">space指定について</div>
</div>

.inner {
	color: #fff;
	background-color: #24422b;　　/* 親要素の背景色を指定 */
	padding: 20px;
}
.box {
	/*--省略--*/
	background-image: url(画像のパス); 　/* 背景画像の指定 */
    background-repeat: space;　　　　　　/* 背景画像の繰り返しの指定 */
}

roundについて

roundについて
「repeat」と違い、指定要素からはみ出ないように画像サイズを調整し表示されます

round指定

round指定について

<div class="inner">
	<div class="box">round指定について</div>
</div>

.inner {
	color: #fff;
	background-color: #24422b;　　/* 親要素の背景色を指定 */
	padding: 20px;
}
.box {
	/*--省略--*/
	background-image: url(画像のパス); 　/* 背景画像の指定 */
    background-repeat: round;　　　　　　/* 背景画像の繰り返しの指定 */
}

no-repeatについて

no-repeatについて
背景画像を一回だけ表示してリピートはしません

no-repeat指定

no-repeat指定について

<div class="inner">
	<div class="box">no-repeat指定について</div>
</div>

.inner {
	color: #fff;
	background-color: #24422b;　　/* 親要素の背景色を指定 */
	padding: 20px;
}
.box {
	/*--省略--*/
	background-image: url(画像のパス); 　/* 背景画像の指定 */
    background-repeat: no-repeat;　　　 /* 背景画像の繰り返しの指定 */
}