CSS의 background-repeat 속성은 요소 배경에 적용된 이미지가 반복되는 방식을 제어하는 데 사용됩니다. 기본값인 repeat는 이미지가 화면 전체를 채울 때까지 가로와 세로 방향으로 계속 반복됩니다.
주요 값 정리
- repeat: 기본값으로, 이미지를 가로·세로 양방향으로 반복합니다.
- no-repeat: 이미지를 한 번만 표시하고 반복하지 않습니다.
- repeat-x: 이미지를 가로 방향으로만 반복합니다.
- repeat-y: 이미지를 세로 방향으로만 반복합니다.
예를 들어, 이미지를 반복하고 싶지 않다면 background-repeat 속성에 no-repeat 값을 지정하면 됩니다. 이 경우 이미지는 화면에 단 한 번만 표시됩니다.
예제 코드
다음 코드를 실행하면 background-repeat 속성이 실제로 어떻게 동작하는지 확인할 수 있습니다:
<html>
<head>
<style>
body {
background-image: url("/images/seaborn-4.jpg?v = 2");
background-repeat: repeat;
}
</style>
</head>
<body>
<p>Tutorials Point</p>
</body>
</html>위 예제에서는 background-image로 배경 이미지를 설정한 뒤, background-repeat: repeat;를 지정하여 이미지가 페이지 전체에 패턴처럼 반복되도록 했습니다. 만약 이미지를 한 번만 표시하려면 해당 값을 no-repeat으로 변경하기만 하면 됩니다.