개체의 배경 속성을 반환하거나 설정한다.

인수

cssSelector : (스타일 선택자)

속성을 가질수 있는 엘레멘트()나 클라스(class) 이름 혹은 인식자(id)이다.

: (속성 문자열)

스타일 속성은 개체가 배경 스타일을 나타내는 속성 문자열이다.

color	backgroundColor 속성에서 유효한 색상값이다.
image	backgroundImage 속성에서 유효한 이미지값이다.
repeat	backgroundRepeat 속성에서 유효한 반복 방식의 값이다.
attachment	backgroundAttachment 속성에서 유효한 배경 첨부 방식의 값이다.
position	backgroundPosition 속성에서 유효한 배경의 위치값이다.

이 속성은 읽기/쓰기이며, 디폴트값은 transparent none repeat scroll 0% 0%이다.

CSS(Cascading Style Sheets) 애트리뷰트는 상속되지 않는다.

특기

background 속성은 복합 축약 스타일 속성이다. 여러 속성들은 각각 별도로 사용될 수 있고, 많은 경우에는 복합 축약 속성으로 한번에 설정하는 것이 편리한다.

복합 축약 속성에서 지정하지 않은 개별 속성들에는 디폴트값이 적용된다. 복합 축약 속성에서 지정하지 않은 개별 속성들에는 디폴트값이 적용된다. 예를들어 image의 디폴트값은 none이다. background:white으로 설정하는 것은 background:white none repeat scroll 0% 0%로 설정하는 것과 같다. 따라서 배경색을 백색으로 설정하는 것은 background:white으로 이전에 설정되었던 image, repeat, attachment나 position 값들을 지우게된다.

배경 속성은 개체의 내용과 패딩 부분에 나타나지만, 테두리 부분에는 border 속성으로 테두리가 설정된다.

IE3.0에서는 background 속성은 개체에서 color와 image 값들만 지원되었다. attachment 값은 body, table과 td 엘레멘트에만 지원되었다. p와 div 같은 블럭 엘레멘트에서, IE3.0의 텍스트 뒤에서만 배경 이미지와 색상이 나타난다. IE4.0 이후, 블럭 엘레멘트에 사용하면 배경은 마진에서 마진으로 연장된다.

background 속성은 상속되지 않지만, 배경이 지정되지 않으면 개체의 모체의 배경 이미지와 색상는 개체 뒤에 나타난다.

색상표를 참조하라.

적용

개체	script	CSS	IE 버전

참조

이 속성은 (영문)DOM(Document Object Model Level 1)과 CSS1(Cascading Style Sheets, Level 1)에서 정의되었다.

<STYLE id="aaa">
.style1{background:beige url(../../gif/tulip.gif) repeat-y top center}
.style2{background:ivory url(../../gif/flw002.jpg) repeat-x bottom right}
</STYLE>
<SCRIPT>
function showAll(){
  str='divObj.className='+divObj.className+'<BR>';
  ss=document.all.tags('style')[0].styleSheet.rules;
  for (i=0;i< ss.length;i++){
    if (('.'+divObj.className)==ss[i].selectorText){
      str+='background:'+ss[i].style.background+'<BR>';
    }
  }
  showA.innerHTML=str;
}
</SCRIPT>
<DIV id="divObj" style="width:500;height:300"
  onmouseover="this.className='style1';showAll();"
  onmouseout="this.className='style2';showAll();">DIV 내용</DIV>
<DIV id=showA>결과 표시창</DIV>