JavaScript를 사용해 배경 이미지가 반복되지 않도록 설정하려면 backgroundRepeat 속성을 활용하면 됩니다. 이 속성을 사용하면 페이지에서 배경 이미지가 반복될지 여부를 손쉽게 제어할 수 있습니다.
기본 개념
backgroundRepeat 속성에 "no-repeat" 값을 지정하면 배경 이미지가 화면에 한 번만 표시되고, 남은 공간에는 더 이상 반복되어 채워지지 않습니다. 반대로 값을 지정하지 않으면 기본값인 repeat가 적용되어 이미지가 가로와 세로 방향으로 계속 반복됩니다.
예제
아래 코드를 실행한 뒤 버튼을 클릭해 보세요. 버튼을 누르면 body 요소에 배경 이미지가 적용되며, 이미지는 화면에 한 번만 나타납니다.
<!DOCTYPE html>
<html>
<body>
<button onclick="display()">Click to Set background image</button>
<script>
function display() {
document.body.style.backgroundImage = "url('https://www.tutorialspoint.com/html5/images/html5-mini-logo.jpg')";
document.body.style.backgroundRepeat = "no-repeat";
}
</script>
</body>
</html>코드 설명
- backgroundImage: 표시할 배경 이미지의 URL을 지정합니다.
url('이미지 경로')형식으로 작성합니다. - backgroundRepeat:
"no-repeat"으로 설정하여 배경 이미지가 반복되지 않도록 합니다.
버튼 클릭 시 display() 함수가 호출되면서 두 속성이 순서대로 적용되고, 결과적으로 배경 이미지가 한 번만 표시되는 것을 확인할 수 있습니다.