1. 원래 스크립트

<div>
   <div data-inven-id="base12" style="width:450px;height:526px;background:url(https://upload2.inven.co.kr/upload/2017/11/19/bbs/i14746204640.png)">
      <div data-inven-id="cube1" style="width:100%;height:100%;background:url('https://upload2.inven.co.kr/upload/2017/11/19/bbs/i13393834840.png')">



         <div data-inven-id="haikei2" style="width:100%;height:100%;background:url('https://upload2.inven.co.kr/upload/2017/11/19/bbs/i16608183145.png');"></div>



         <div style="width: 60px; height:18px; margin:5px; float: left; background-color: yellow; border-radius: 5px;text-align:center;" 
         data-inven-click-css="{'cube1':[{'background':'none'},{'background':'url(https://upload2.inven.co.kr/upload/2017/11/19/bbs/i13393834840.png)'}]}">
            <span style="font-weight:bold;">큐브</span>
         </div>



         <div style="width: 60px; height:18px; margin:5px; float: left; background-color: yellow; border-radius: 5px;text-align:center;" 
         data-inven-click-css="{'haikei2':[{'background':'none'},{'background':'url(https://upload2.inven.co.kr/upload/2017/11/19/bbs/i16608183145.png)'}]}">

            <span style="font-weight:bold;">배경</span>
         </div>



         <div style="width: 60px; height:18px; margin:5px; float: left; background-color: lightblue; border-radius: 5px;text-align:center;" 
         data-inven-click-css="{'cube1':{'background':'url(https://upload2.inven.co.kr/upload/2017/11/19/bbs/i13393834840.png)'},
                              'haikei2':{'background':'url(https://upload2.inven.co.kr/upload/2017/11/19/bbs/i16608183145.png)'}}">

         <span style="font-weight:bold;">초기화</span>
         </div>




      </div>
   </div>
</div>



큐브
배경
초기화
 









2. 수정된 스크립트


<div>
   <div data-inven-id="base12" style="width:450px;height:526px;background:url(https://upload2.inven.co.kr/upload/2017/11/19/bbs/i14746204640.png);">
      <div data-inven-id="cube1" style="width:100%;height:100%;background:url('https://upload2.inven.co.kr/upload/2017/11/19/bbs/i13393834840.png') center / 100% no-repeat;">



         <div data-inven-id="haikei2" style="width:100%;height:100%;background:url('https://upload2.inven.co.kr/upload/2017/11/19/bbs/i16608183145.png');"></div>



         <div style="width: 60px; height:18px; margin:5px; float: left; background-color: yellow; border-radius: 5px;text-align:center;" 
         data-inven-click-css="{'cube1':[{'background':'none'},{'background':'url(https://upload2.inven.co.kr/upload/2017/11/19/bbs/i13393834840.png) center / 100% no-repeat'}]}">
            <span style="font-weight:bold;">큐브</span>
         </div>



         <div style="width: 60px; height:18px; margin:5px; float: left; background-color: yellow; border-radius: 5px;text-align:center;" 
         data-inven-click-css="{'haikei2':[{'background':'none'},{'background':'url(https://upload2.inven.co.kr/upload/2017/11/19/bbs/i16608183145.png)'}]}">

            <span style="font-weight:bold;">배경</span>
         </div>



         <div style="width: 60px; height:18px; margin:5px; float: left; background-color: lightblue; border-radius: 5px;text-align:center;" 
         data-inven-click-css="{'cube1':{'background':'url(https://upload2.inven.co.kr/upload/2017/11/19/bbs/i13393834840.png) center / 100% no-repeat'},
                              'haikei2':{'background':'url(https://upload2.inven.co.kr/upload/2017/11/19/bbs/i16608183145.png)'}}">

         <span style="font-weight:bold;">초기화</span>
         </div>




      </div>
   </div>
</div>



큐브
배경
초기화
 






3. 설명


1) style의 경우
background:url('https://upload2.inven.co.kr/upload/2017/11/19/bbs/i13393834840.png') center / 100% no-repeat;

2) css의 경우
'background':'url(https://upload2.inven.co.kr/upload/2017/11/19/bbs/i13393834840.png) center / 100% no-repeat'



이미지 url 괄호 닫은 뒤쪽에 center / 100% no-repeat을 추가해주세요.

center는 중앙 정렬, 100%는 가로,세로 사이즈 비율, no-repeat은 이미지가 반복 출력되지 않는 것을 의미합니다. 


+
center / 100% 90% 의 경우 가로 100%, 세로 90%를 의미합니다.


++
사이즈 단위의 경우 마찬가지로 center / 450px 526px no-repeat 이렇게 절댓값도 가능합니다.