CSS의 background-repeat 속성은 배경 이미지가 요소 안에서 어떻게 반복될지를 정의하는 데 사용됩니다. 기본적으로 배경 이미지는 요소 전체를 채울 때까지 가로와 세로 방향으로 반복되며, 이 속성을 활용하면 반복 방향과 방식을 자유롭게 제어할 수 있습니다.
기본 문법
CSS background-repeat 속성의 문법은 다음과 같습니다.
Selector {
background-repeat: /*값*/
}주요 속성 값
background-repeat 속성에 사용할 수 있는 대표적인 값들은 다음과 같습니다.
- repeat – 기본값으로, 배경 이미지가 가로·세로 양방향으로 반복됩니다.
- no-repeat – 배경 이미지가 한 번만 표시되고 반복되지 않습니다.
- repeat-x – 배경 이미지가 가로 방향으로만 반복됩니다.
- repeat-y – 배경 이미지가 세로 방향으로만 반복됩니다.
- space – 이미지 크기를 잘리지 않고 조정하면서 요소 사이에 균일한 간격을 두고 반복합니다.
- round – 이미지가 잘리지 않도록 크기를 늘리거나 줄이면서 반복합니다.
또한 space repeat처럼 두 개의 값을 함께 지정하면 첫 번째 값은 가로 방향, 두 번째 값은 세로 방향의 반복 동작을 각각 제어합니다.
예제 1: repeat 값 사용하기
다음 예제는 body 요소의 배경 이미지를 repeat 값으로 반복해서 표시합니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://www.tutorialspoint.com/images/microsoftproject.png");
background-repeat: repeat;
}
</style>
</head>
<body>
</body>
</html>실행 결과
위 코드를 실행하면 배경 이미지가 화면 전체에 걸쳐 가로·세로 방향으로 반복되어 나타납니다.
예제 2: space repeat 값 사용하기
다음 예제는 ul(목록) 요소에 배경 이미지를 적용하고, space repeat 값을 사용해 가로 방향은 간격을 유지하며, 세로 방향은 반복되도록 설정합니다.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
background-image: url("https://www.tutorialspoint.com/images/questions-answers.png");
background-repeat: space repeat;
}
</style>
</head>
<body>
<h2>Tutorials</h2>
<ul>
<li>Java</li>
<li>C#</li>
<li>Etherum</li>
<li>DBMS</li>
<li>OS</li>
</ul>
</body>
</html>실행 결과
위 코드를 실행하면 목록 영역의 배경에 이미지가 간격을 두고 반복되어 표시되는 것을 확인할 수 있습니다.
정리
background-repeat 속성은 웹 페이지의 배경 디자인에서 필수적인 요소입니다. repeat, no-repeat, repeat-x, repeat-y, space, round 등 다양한 값을 상황에 맞게 조합하면 이미지가 잘리지 않으면서도 원하는 레이아웃에 맞는 배경 효과를 손쉽게 구현할 수 있습니다.