如何使背景图像跨越每个表格行并使用 HTML 和/或 CSS 动态调整大小？

Question

I have the following code but it makes the table appear like this when resizing. How can I make each row have a background image that is resized properly as the browser window is resized?

<style type="text/css">
    .tg  {border-collapse:collapse;border-spacing:0;}
    .tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
      overflow:hidden;padding:10px 5px;word-break:normal;}
    .tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
      font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
    .tg .tg-0lax{text-align:left;vertical-align:top}
    
    table {
        width: 600px;
        background-image: url('bg.png');
        background-repeat: repeat-y;
        background-size: 100%;
        height: 100%;
    }
}
</style>
    
    
<table class="tg">

      <tr>
        <td class="tg-0lax">Check</td>
        <td class="tg-0lax">MB Image</td>
        <td class="tg-0lax">LE 1000</td>
        <td class="tg-0lax">MB Name<p />Release</td>
      </tr>
      
      <tr>
        <td class="tg-0lax">Check</td>
        <td class="tg-0lax">MB Image</td>
        <td class="tg-0lax">LE 1000</td>
        <td class="tg-0lax">MB Name<p />Release</td>
      </tr>
      
      <tr>
        <td class="tg-0lax">Check</td>
        <td class="tg-0lax">MB Image</td>
        <td class="tg-0lax">LE 1000</td>
        <td class="tg-0lax">MB Name<p />Release</td>
      </tr>
      
      <tr>
        <td class="tg-0lax">Check</td>
        <td class="tg-0lax">MB Image</td>
        <td class="tg-0lax">LE 1000</td>
        <td class="tg-0lax">MB Name<p />Release</td>
      </tr>
    
</table>

I want each row to use this image:

and look like this and be resizable:

Answer 1

background-size? or is that not what you expected? If not clarify the expected result.

 body{margin:0;} table { height: 100vh; width: 100vw; border-collapse: collapse } td { border: solid 1px } tr { background: url(https://i.stack.imgur.com/1aeFs.png) -6vw 0; background-size: 106% 100%; }

 <table> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table>