웹 페이지에서 배경 이미지의 반복 방식을 조절하려면 background-repeat 속성을 사용합니다. 이 속성은 지정한 배경 이미지가 요소 영역 안에서 가로·세로 방향으로 어떻게 반복될지 결정합니다.
만약 이미지를 반복하고 싶지 않다면 no-repeat 값을 사용하면 됩니다. 이 경우 배경 이미지는 화면에 단 한 번만 표시되며, 나머지 영역은 비어 있거나 배경색으로 채워집니다.
background-repeat 속성의 주요 값
- repeat — 기본값입니다. 이미지가 가로와 세로 방향으로 모두 반복되어 요소 전체를 채웁니다.
- no-repeat — 이미지가 반복되지 않고 한 번만 표시됩니다.
- repeat-x — 이미지가 가로 방향으로만 반복됩니다.
- repeat-y — 이미지가 세로 방향으로만 반복됩니다.
예제
아래 코드를 직접 실행해 보면 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>
위 예제에서는 repeat 값을 사용했기 때문에 배경 이미지가 페이지 전체에 걸쳐 반복됩니다. 만약 이미지를 한 번만 표시하고 싶다면 background-repeat: no-repeat;으로 변경하면 됩니다.