HTML DOM의 backgroundRepeat 스타일 속성은 배경 이미지가 요소 내에서 어떻게 반복될지 설정하거나 현재 값을 가져오는 데 사용됩니다. 이 속성을 활용하면 자바스크립트를 통해 동적으로 배경 이미지의 반복 방식을 제어할 수 있습니다.
문법(Syntax)
backgroundRepeat 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.backgroundRepeat = "repeat|repeat-x|repeat-y|no-repeat|initial|inherit";
속성 값(Value)
backgroundRepeat 속성에 사용할 수 있는 주요 값은 아래 표와 같습니다.
| 번호 | 값 및 설명 |
|---|---|
| 1 | repeat 기본값(default)입니다. 배경 이미지를 세로 방향과 가로 방향 모두로 반복하여 채웁니다. |
| 2 | repeat-x 배경 이미지를 가로 방향으로만 반복합니다. |
| 3 | repeat-y 배경 이미지를 세로 방향으로만 반복합니다. |
| 4 | no-repeat 배경 이미지를 반복하지 않고 한 번만 표시합니다. |
추가로 사용 가능한 값
- initial: 속성을 기본값(repeat)으로 초기화합니다.
- inherit: 부모 요소의 backgroundRepeat 값을 상속받습니다.
예제(Example)
다음 예제는 버튼 클릭 시 body의 배경 이미지 반복 방식을 repeat-x에서 repeat-y로 변경하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://www.tutorialspoint.com/power_bi/images/power-bi-minilogo.jpg");
background-repeat: repeat-x;
color: black;
font-size: 20px;
}
</style>
<script>
function changeBackRepeat(){
document.body.style.backgroundRepeat = "repeat-y";
document.getElementById("Sample").innerHTML = "이제 배경 이미지가 세로 방향으로 반복됩니다.";
}
</script>
</head>
<body>
<h2>데모 제목</h2>
<p>데모 텍스트입니다.</p>
<p>데모 텍스트입니다.</p>
<p>데모 텍스트입니다.</p>
<p>아래 버튼을 클릭하면 body 배경 이미지의 반복 값이 변경됩니다.</p>
<button onclick="changeBackRepeat()">반복 변경</button>
<p id="Sample"></p>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 처음에는 배경 이미지가 가로 방향(repeat-x)으로 반복되어 표시됩니다.
이후 반복 변경 버튼을 클릭하면 배경 이미지가 세로 방향(repeat-y)으로 반복되도록 변경되며, 안내 문구가 함께 출력됩니다.
정리
backgroundRepeat 속성은 CSS의 background-repeat 속성과 동일한 역할을 하며, 자바스크립트에서 동적으로 배경 이미지의 반복 패턴을 제어해야 할 때 유용하게 사용됩니다. 웹 페이지 디자인에서 패턴 배경이나 워터마크 효과를 구현할 때 특히 유용합니다.