SYNCERのロゴ
アイキャッチ画像

background-repeat - 背景の繰り返し

background-repeatは、背景の繰り返し表示を調整するプロパティです。

概要

名前
background-repeat
<repeat-style>#
<repeat-style> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}
初期値
repeat
適用対象
全ての要素。
継承
しない。
パーセンテージ
N/A
メディア
visual
計算値
A list, each item consisting of: two keywords, one per dimension
アニメーションの可否
N/A
仕様書
https://drafts.csswg.org/css-backgrounds-3/#the-background-repeat

チュートリアル

下記のリストからキーワードを指定します。

repeat
初期値。水平方向、垂直方向に繰り返し表示。
repeat-x
水平方向にだけ繰り返し表示。
repeat-y
垂直方向にだけ繰り返し表示。
no-repeat
繰り返し表示をしない。
space
タイルが途切れないように、タイルとタイルの間に余白が入る。
round
タイルが途切れないように、最大限、タイルの幅が調整される。アスペクト比は維持されない。

2つの値を指定できます。1つ目の値は水平方向、2つ目の値は垂直方向に適用されます。1つの値だけを指定した場合、それが水平方向、垂直方向に適用されます。ただし、repeat-x、repeat-yは1つの値でしか指定できません。

div {
	background-repeat: space ;	/* 水平方向: space、垂直方向: space */
}

div {
	background-repeat: space round ;	/* 水平方向: space、垂直方向: round */
}

デモ

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
<style>
div {
	background-image: url(./image.png) ;
	background-size: 50px ;
	border: 1px dotted #000 ;
	margin: 0 0 24px ;
	height: 160px ;
}

#no-repeat {
	background-repeat: no-repeat ;
}

#repeat-x {
	background-repeat: repeat-x ;
}

#space {
	background-repeat: space ;
}

#round {
	background-repeat: round ;
}
</style>
</head>
<body>
	<p>no-repeat</p>
	<div id="no-repeat"></div>
	<hr>
	<p>repeat-x</p>
	<div id="repeat-x"></div>
	<hr>
	<p>space</p>
	<div id="space"></div>
	<hr>
	<p>round</p>
	<div id="round"></div>
</body>
</html>

サポート状況

FeaturesChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
background-repeat
no-repeat 9+
repeat-x 9+
repeat-y 9+
space 49+ 5.1+ 9+
round 49+ 5.1+ 9+
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年11月4日 (土)
コンテンツを公開しました。