HTML DOM의 background 속성은 요소와 관련된 배경 이미지를 설정하거나 가져오는 데 사용됩니다. 이 속성은 대표적인 단축(shorthand) 속성으로, 하나의 선언만으로 최대 8개의 개별 배경 속성을 동시에 다룰 수 있어 코드를 간결하게 유지하는 데 매우 유용합니다.
문법(Syntax)
background 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.background = "color image repeat attachment position size origin clip|initial|inherit"
속성 값(Value)
background 단축 속성에서 사용할 수 있는 값은 아래 표와 같습니다.
| 번호 | 값 및 설명 |
|---|---|
| 1 | color 요소의 배경색을 설정합니다. |
| 2 | image 요소의 배경 이미지를 설정합니다. |
| 3 | repeat 배경 이미지가 반복되는 방식을 설정합니다. |
| 4 | attachment 배경 이미지를 고정(fixed)할지, 아니면 페이지와 함께 스크롤(scroll)할지 설정합니다. |
| 5 | position 배경 이미지의 시작 위치를 설정합니다. |
| 6 | size 배경 이미지의 크기를 설정합니다. |
| 7 | origin 배경이 배치되는 기준 영역(background positioning area)을 지정합니다. |
| 8 | clip 배경 이미지가 어디까지 그려질지(페인팅 범위)를 설정합니다. |
예제(Example)
다음 예제는 background 속성을 활용해 div 요소의 배경 이미지를 버튼 클릭 한 번으로 변경하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
#PIC{
width: 250px;
height: 150px;
border:solid 3px black;
font-weight:100;
text-align:center;
color:white;
font-size:40px;
background: url("https://www.tutorialspoint.com/python/images/python-mini.jpg") no-repeat fixed 2% 8%;
}
</style>
<script>
function changeBackground(){
document.getElementById("PIC").style.backgroundImage="url(https://www.tutorialspoint.com/csharp/images/csharp-mini-logo.jpg)";
document.getElementById("Sample").innerHTML="배경 URL이 변경되어 새로운 배경 이미지가 표시됩니다.";
}
</script>
</head>
<body>
<h2>Learning is fun</h2>
<div id="PIC">Tutorial</div>
<p>아래 버튼을 클릭하면 위 div의 배경 이미지가 변경됩니다.</p>
<button onclick="changeBackground()">CHANGE BACKGROUND</button>
<p id="Sample"></p>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
CHANGE BACKGROUND 버튼을 클릭한 후의 결과입니다.
마무리
background 속성은 색상, 이미지, 반복 방식, 스크롤 여부, 위치, 크기, 기준 영역, 클리핑 범위까지 총 8가지 배경 관련 속성을 한 줄로 제어할 수 있는 강력한 도구입니다. 자바스크립트의 DOM 스타일 객체와 함께 사용하면 사용자 인터랙션에 따라 배경을 동적으로 변경하는 UI도 손쉽게 구현할 수 있습니다.