CSS의 background-repeat 속성은 요소의 배경 이미지가 어떻게 반복될지를 제어하는 데 사용됩니다. 기본값은 repeat로, 배경 이미지가 요소 영역 전체를 채울 때까지 가로와 세로 방향으로 계속 반복됩니다.
background-repeat의 주요 값
- repeat – 이미지를 가로·세로 양방향으로 반복합니다(기본값).
- no-repeat – 이미지를 반복하지 않고 한 번만 표시합니다.
- repeat-x – 이미지를 가로 방향으로만 반복합니다.
- repeat-y – 이미지를 세로 방향으로만 반복합니다.
- space – 이미지가 잘리지 않도록 이미지 사이에 빈 공간을 두고 반복합니다.
- round – 이미지가 잘리지 않도록 크기를 자동 조절하며 반복합니다.
배경 이미지를 반복하고 싶지 않다면 no-repeat 값을 사용하면 됩니다. 이 경우 이미지는 요소 안에서 단 한 번만 표시되며, 나머지 영역은 배경색이나 다른 배경 스타일로 채워집니다.
예제 코드
다음 예제를 실행하면 background-repeat 속성이 실제로 어떻게 동작하는지 확인할 수 있습니다:
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat;
}
</style>
</head>
<body>
<p>Tutorials Point</p>
</body>
</html>
위 코드에서는 background-repeat: repeat;가 적용되어 있으므로 배경 이미지가 페이지 전체에 걸쳐 반복되어 나타납니다. 이미지를 한 번만 표시하고 싶다면 값을 no-repeat으로 변경하면 되고, 가로 또는 세로 방향으로만 반복하고 싶다면 각각 repeat-x, repeat-y를 사용하면 됩니다.