JavaScript에서 요소의 배경 이미지를 설정하려면 backgroundImage 속성을 사용하면 됩니다. 이 속성은 CSS의 background-image와 동일한 역할을 하며, DOM 요소의 style 객체를 통해 원하는 요소에 배경 이미지를 동적으로 지정할 수 있습니다.
기본 문법
object.style.backgroundImage = "url('이미지 경로')";예제
다음 코드는 버튼을 클릭하면 페이지 전체 배경에 이미지가 설정되는 간단한 예제입니다. 직접 실행해 보며 동작 방식을 확인해 보세요.
<!DOCTYPE html>
<html>
<body>
<button onclick="display()">배경 이미지 설정하기</button>
<script>
function display() {
document.body.style.backgroundImage = "url('https://www.tutorialspoint.com/html5/images/html5-mini-logo.jpg')";
}
</script>
</body>
</html>위 예제에서 버튼을 클릭하면 display() 함수가 호출되고, document.body.style.backgroundImage에 이미지 URL이 할당됩니다. 그 결과 body 요소의 배경 이미지가 즉시 변경됩니다.
추가 팁
배경 이미지가 반복되지 않도록 하려면 backgroundRepeat 속성을 "no-repeat"으로 설정하고, 이미지 크기를 조절하려면 backgroundSize 속성을 함께 활용하면 더욱 완성도 높은 결과를 얻을 수 있습니다.