backgroundImage 속성이란?
HTML DOM의 backgroundImage 속성은 특정 요소의 배경 이미지를 설정하거나, 현재 적용되어 있는 배경 이미지 값을 가져올 때 사용됩니다. JavaScript를 활용하면 버튼 클릭 같은 사용자 이벤트에 따라 페이지의 배경 이미지를 동적으로 변경할 수 있습니다.
구문(Syntax)
backgroundImage 속성을 설정하는 기본 구문은 다음과 같습니다.
object.style.backgroundImage = "url('URL')|none|initial|inherit"속성 값(Value)
backgroundImage 속성에 사용할 수 있는 값은 아래와 같습니다.
| 번호 | 속성 값 및 설명 |
|---|---|
| 1 | url('URL') 배경으로 사용할 이미지 파일의 경로(URL)를 지정합니다. |
| 2 | none 배경 이미지를 사용하지 않도록 지정합니다. 이 값이 기본값(default)입니다. |
| 3 | initial 해당 속성을 브라우저의 초기(default) 값으로 되돌립니다. |
| 4 | inherit 부모 요소의 backgroundImage 속성 값을 상속받습니다. |
예제(Example)
다음 예제는 backgroundImage 속성을 사용하여 div 요소의 배경 이미지를 동적으로 변경하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1 {
height: 300px;
width: 500px;
background-image: url("https://www.tutorialspoint.com/mongodb/images/mongodb-minilogo.jpg");
background-repeat: no-repeat;
background-size: cover;
}
</style>
<script>
function changeBackImage(){
document.getElementById("DIV1").style.backgroundImage="url('https://www.tutorialspoint.com/plsql/images/plsql-mini-logo.jpg')";
document.getElementById("Sample").innerHTML="배경 이미지가 PL/SQL Tutorial 이미지로 변경되었습니다.";
}
</script>
</head>
<body>
<h2>Learn</h2>
<div id="DIV1"></div>
<p>아래 버튼을 클릭하면 위 div의 배경 이미지가 변경됩니다.</p>
<button onclick="changeBackImage()">CHANGE IMAGE</button>
<p id="Sample"></p>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
CHANGE IMAGE 버튼을 클릭하면 배경 이미지가 아래와 같이 변경됩니다.
정리
backgroundImage 속성은 CSS의 background-image와 동일한 역할을 하지만, JavaScript에서 실시간으로 제어할 수 있다는 점이 큰 장점입니다. url(), none, initial, inherit 네 가지 값을 상황에 맞게 활용하면 이미지 갤러리, 테마 전환 등 다양한 동적 UI를 손쉽게 구현할 수 있습니다.