background-repeat 속성

background-repeat 속성은 요소의 배경 이미지를 어떤 방식으로 반복할지 지정합니다. 기본적으로 이미지는 X축과 Y축 모두에서 반복되며, 이로 인해 사용 가능한 전체 영역을 덮게 됩니다.

구문

선택자 {
	background-repeat: no-repeat | repeat | repeat-x | repeat-y | space | round;
}

값

값	설명
`no-repeat`	이미지는 전혀 반복되지 않습니다.
`repeat-x`	이미지는 X축을 따라 반복됩니다.
`repeat-y`	이미지는 Y축을 따라 반복됩니다.
`repeat`	이미지는 X축과 Y축 모두를 따라 반복됩니다.
`space`	영역을 완전히 채울 수 있을 만큼 이미지가 반복되며, 이를 달성할 수 없는 경우 이미지 사이에 빈 공간이 추가됩니다.
`round`	영역에 정수 개의 이미지가 들어가도록 반복되며, 이를 달성할 수 없는 경우 배경 이미지의 크기가 조정됩니다.

기본값: repeat - 전체 화면을 패턴으로 덮습니다.

예제

기본적으로 배경 이미지는 요소 전체를 타일처럼 채웁니다:

<div id="elem"></div>

#elem {
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

예제

이미지가 반복되지 않도록 만들어 봅시다:

<div id="elem"></div>

#elem {
	background-repeat: no-repeat;
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

예제

이번에는 이미지가 X축을 따라 반복되도록 해봅시다:

<div id="elem"></div>

#elem {
	background-repeat: repeat-x;
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

예제

이번에는 Y축을 따라 반복되도록 해봅시다:

<div id="elem"></div>

#elem {
	background-repeat: repeat-y;
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

예제

축을 따라 반복되는 이미지는 background-position 속성을 사용하여 위치를 지정할 수 있습니다:

<div id="elem"></div>

#elem {
	background-repeat: repeat-y;
	background-position: top center;
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

예제

space 값이 어떻게 작동하는지 살펴봅시다:

<div id="elem"></div>

#elem {
	background-repeat: space;
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

예제

round 값이 어떻게 작동하는지 살펴봅시다:

<div id="elem"></div>

#elem {
	background-repeat: round;
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

함께 보기

배경에 대한 단축 속성인 background 속성