background-repeat 속성

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

구문

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

값

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

예제

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

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

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

Результат:

예제

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

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

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

Результат:

예제

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

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

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

Результат:

예제

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

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

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

Результат:

예제

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

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

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

Результат:

예제

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

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

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

Результат:

예제

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

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

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

Результат:

함께 보기