backgroundImage, backgroundPosition, backgroundRepeat, backgroundRepeatX, backgroundRepeatY 속성 예제

DIV 내용 단추를 클릭해 보라.
backgroundPositionX :
backgroundPositionY :
backgroundRepeat :
결과 표시창
<STYLE>button {width:80}</STYLE>
<SCRIPT>
function showAll(){
  str='divObj.style.backgroundPosition="<FONT color=blue>'+divObj.style.backgroundPosition+'</FONT>"<BR>';
  str+='divObj.style.backgroundRepeat="<FONT color=blue>'+divObj.style.backgroundRepeat+'</FONT>"<BR>';
  showA.innerHTML=str;
}
</SCRIPT>
<DIV id="divObj" style="background-image:url(../../../gif/tulip.gif);background-color:#ffeeff;
  background-position:center center;background-repeat:no-repeat;
  width:500;height:270;color:red;font-size:140%;padding-top:5em;border:solid 1 blue">
DIV 내용 <IMG src="../../../gif/rfexample.gif"> 단추를 클릭해 보라.
</DIV>
<SPAN style=width:180>backgroundPositionX :</SPAN>
<BUTTON onclick="divObj.style.backgroundPositionX='left';showAll()">left</BUTTON>
<BUTTON onclick="divObj.style.backgroundPositionX='center';showAll()">center</BUTTON>
<BUTTON onclick="divObj.style.backgroundPositionX='right';showAll()">right</BUTTON><BR>
<SPAN style=width:180>backgroundPositionY :</SPAN>
<BUTTON onclick="divObj.style.backgroundPositionY='top';showAll()">top</BUTTON>
<BUTTON onclick="divObj.style.backgroundPositionY='center';showAll()">center</BUTTON>
<BUTTON onclick="divObj.style.backgroundPositionY='bottom';showAll()">bottom</BUTTON><BR>
<SPAN style=width:180>backgroundRepeat :</SPAN>
<BUTTON onclick="divObj.style.backgroundRepeat='no-repeat';showAll()">no-repeat</BUTTON>
<BUTTON onclick="divObj.style.backgroundRepeat='repeat-x';showAll()">repeat-x</BUTTON>
<BUTTON onclick="divObj.style.backgroundRepeat='repeat-y';showAll()">repeat-y</BUTTON>
<BUTTON onclick="divObj.style.backgroundRepeat='repeat';showAll()">repeat</BUTTON>
<DIV id=showA>결과 표시창</DIV>