CSS의 배경 반복(Background Repeat)은 웹 페이지에서 배경 이미지가 어떤 방식으로 반복되어 표시될지를 설정하는 기능입니다. 이를 위해 background-repeat 속성을 사용하며, 사용 가능한 속성 값은 다음과 같습니다.
background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;
속성 값 설명
- repeat – 기본값으로, 배경 이미지를 가로와 세로 방향 모두 반복합니다.
- repeat-x – 배경 이미지를 가로 방향으로만 반복합니다.
- repeat-y – 배경 이미지를 세로 방향으로만 반복합니다.
- no-repeat – 배경 이미지를 한 번만 표시하고 반복하지 않습니다.
- initial – 속성을 기본값으로 설정합니다.
- inherit – 부모 요소의 값을 상속받습니다.
예제 1: repeat-x 적용하기
다음 예제는 배경 이미지가 가로 방향으로만 반복되도록 설정한 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://www.tutorialspoint.com/images/Swift.png");
background-repeat: repeat-x;
background-color: blue;
color: white;
}
.demo {
text-decoration: overline underline;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>실행 결과
예제 2: repeat-y 적용하기
이번에는 배경 이미지가 세로 방향으로만 반복되도록 설정한 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://www.tutorialspoint.com/images/Swift.png");
background-repeat: repeat-y;
background-color: orange;
color: white;
}
.demo {
text-decoration: overline underline;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>실행 결과
마무리
background-repeat 속성은 배경 이미지의 반복 패턴을 손쉽게 제어할 수 있는 유용한 CSS 속성입니다. repeat-x와 repeat-y를 활용하면 페이지 상단 바나 측면 장식 등 다양한 디자인 효과를 구현할 수 있으니, 위 예제를 직접 실행해 보며 각 값의 차이를 익혀보시기 바랍니다.