html 화면 크기를 늘리면 backgroud 이미지랑 텍스트랑 분리되는데 함께 움직이게 하려면 어떻게 해야 할까요?

조회수 468회

html은 이렇고

<rolltemplate class="sheet-rolltemplate-coc-1">
    <table>   
      <td class="template_value" style="color:white; style="font-size:1.2em;">. </td>      
        <tr>
      <td class="template_value" style="color:white; style="font-size:1.2em;">. </td>      
        <tr>
      <td class="template_value"  style="font-size:0.7em;">{{name}} 판정 </td>      
        <tr>
          <td class="template_value" style="font-size:2em;" "font-wight:bold;">{{roll1}}</td>
        </tr>
        <tr>
          <td class="template_value" style="font-size:0.5em;">{{success}}◈{{hard}}◈{{extreme}}</td>
        </tr>
      <tr style="background:none;">
                <!-- 01 is always Critical -->
                {{#rollTotal() roll1 1}} 
                  <td style="background-color:transparent; background: url(https://imgur.com/JIqTVKm.png); background-repeat:no-repeat;" class="template_value"><b data-i18n="critical">Critical</b></td>
                {{/rollTotal() roll1 1}} 
                <!-- Is Success -->
                {{#rollBetween() roll1 2 success}}
                  <!-- Is Standard -->
                  {{#rollGreater() roll1 hard}}
<td style="background-color:transparent; background: url(https://imgur.com/n32PFNH.png); background-repeat:no-repeat;" class="template_value" data-i18n="success">Success</td>
                  {{/rollGreater() roll1 hard}}
                  <!-- Is Hard or Extreme -->
                  {{#rollBetween() roll1 2 hard}}
                    <!-- Is Hard -->
                    {{#rollGreater() roll1 extreme}}
                      <td style="background-color:transparent; background: url(https://imgur.com/2Eixp4M.png); background-repeat:no-repeat;" class="template_value" data-i18n="hard">Hard</td>
                    {{/rollGreater() roll1 extreme}}
                    <!-- Is Extreme -->
                    {{#rollBetween() roll1 2 extreme}}
                      <td style="background-color:transparent; background: url(https://imgur.com/FghcCL9.png); background-repeat:no-repeat;" class="template_value"><b data-i18n="extreme">Extreme</b></td>
                    {{/rollBetween() roll1 2 extreme}}
                  {{/rollBetween() roll1 2 hard}}
                {{/rollBetween() roll1 2 success}}
                <!-- Is Not Success -->
                {{#rollGreater() roll1 success}}
                  <!-- Is skill >= 50 -->
                  {{#rollGreater() success 49}}
                    <!-- Is Fumble -->
                    {{#rollTotal() roll1 100}} 
                      <td style="background-color:transparent; background: url(https://imgur.com/ih4GR4B.png); background-repeat:no-repeat;" class="template_value"><b data-i18n="fumble">Fumble</b></td>
                    {{/rollTotal() roll1 100}} 
                    <!-- Is Fail -->
                    {{#rollLess() roll1 100}}
                      <td style="background-color:transparent; background: url(https://imgur.com/QnycOE3.png); background-repeat:no-repeat;" class="template_value" data-i18n="fail"><span style="color:white;">Fail</span></td>                    {{/rollLess() roll1 100}}
                  {{/rollGreater() success 49}}
                  <!-- Is skill < 50 -->
                  {{#rollLess() success 50}}
                    <!-- Is Fumble -->
                    {{#rollGreater() roll1 95}}
                      <td style="background-color:transparent; background: url(https://imgur.com/ih4GR4B.png); background-repeat:no-repeat;" class="template_value"><b data-i18n="fumble">Fumble</b></td>
                    {{/rollGreater() roll1 95}}
                    <!-- Is Fail -->
                    {{#rollLess() roll1 96}}
                      <td style="background-color:transparent; background: url(https://imgur.com/QnycOE3.png); background-repeat:no-repeat;" class="template_value" data-i18n="fail">Fail</td>
                    {{/rollLess() roll1 96}}
                  {{/rollLess() success 50}}
                {{/rollGreater() roll1 success}}

            </td>
        </tr>
      <td class="template_value" style="color:white; style="font-size:1.2em;">. </td>      
        <tr>
<table border=1 width=100 style="table-layout: fixed" >        
    </table>
</rolltemplate>

css는 이렇습니다.

/* simple (no PD/BD) rolltemplate */
.sheet-rolltemplate-coc-1 table {
    width: 100%;
    border: none;
    line-height: 1.8em;
    background: url(https://imgur.com/LIdPVuo.png);
    background-repeat:no-repeat;
    font-weight: bold;

}
.sheet-rolltemplate-coc-1 caption {
    text-align: center;
    background: black;
    color: white;
    font-weight: bold;
    padding: 2px;
    border: 1px solid black;
   line-height: 1.6em;
}
sheet-rolltemplate-coc-1 td {
  padding: 2px;
  border-bottom: 1px solid black;
}
.sheet-rolltemplate-coc-1 td.sheet-template_label {
    font-weight: bold;
}
.sheet-rolltemplate-coc-1 td.sheet-template_value {
    text-align: center;
}
.sheet-rolltemplate-coc-1 .inlinerollresult  {
  display: inline-block;
  min-width: 1.5em;
  text-align: center;
  border:0.1px dashed white;
    background: none;
}
.sheet-rolltemplate-coc-1 .inlinerollresult.fullcrit {
  border: none;
    background: none;
}
.sheet-rolltemplate-coc-1 .inlinerollresult.fullfail {
  border:none;
    background: none;
}
.sheet-rolltemplate-coc-1 .inlinerollresult.importantroll {
  border:none;
    background:none;
}

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)