Table too long for background image at different resolutions

问题

ALREADY SOLVED: Multiple backgrounds on top of each other (Normal, Streched, Normal)

I am currently working on a website for a school project and I'm facing issues with different screen resolutions. My website looks good on my 15.6" laptop at normal resolution, but as soon as I start zooming out, the centered table element gets too long for the background image, since it has a fixed size and cannot strech with the table. My first thought was splitting the background image into 3 parts and streching only the middle one. Does anybody have a more elegant solution and if not, an idea of how to realize this in HTML?

Normal: http://www11.pic-upload.de/26.12.14/opay2lxe63et.png
Zoomed out: http://www11.pic-upload.de/26.12.14/cnrvvumqfcm.png

HTML:

<div id="content">
<table>
<colgroup>
    <col width="100">
    <col width="300">
    <col width="200">
</colgroup>
<tr>
    <td><b>Episode</b></td>
    <td><b>Title</b></td>
    <td><b>Available Hoster</b></td>
</tr><tr>
    <td>01</td>
    <td>Rebirth</td>
    <td>-</td>
</tr><tr>
    <td>02</td>
    <td>Confrontation</td>
    <td>-</td>
</tr><tr>
    <td>36</td>
    <td>January 28</td>
    <td>-</td>
</tr><tr>
    <td>37</td>
    <td>New World</td>
    <td>-</td>
</tr></table></div>

CSS:

#content{
    width: 1024px;
    height: 950px;
    background: url(img/content_background.png) no-repeat;
    display: table-cell;
    vertical-align: middle;
}

#content table{
    border-collapse:collapse;
    color: white;
    margin: auto;
}

#content td{
    border: 1px solid white;
    text-align: center;
}

回答1:

please use background-size : 100%; in your css

回答2:

dont use only 1 image in background. slice the images as your requirement and use it again. (e.g use top banner image separate and bottom corner icon separate image and border use css border)

来源：https://stackoverflow.com/questions/27659851/table-too-long-for-background-image-at-different-resolutions