html - 对于不同分辨率的背景图像，表格太长

Question

已解决:Multiple backgrounds on top of each other (Normal, Streched, Normal)

我目前正在为一个学校元素开发一个网站，我遇到了不同屏幕分辨率的问题。我的网站在我的 15.6"笔记本电脑上以正常分辨率看起来不错，但是当我开始缩小时，居中的表格元素对于背景图像来说变得太长，因为它具有固定大小并且不能与表格一起拉伸(stretch)。我的第一个想法将背景图像分成 3 部分并仅拉伸(stretch)中间部分。有人有更优雅的解决方案吗？如果没有，请问如何在 HTML 中实现这一点？

正常:http://www11.pic-upload.de/26.12.14/opay2lxe63et.png
缩小: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;
}

Answer 1

请在您的 CSS 中使用 background-size : 100%;