css - 用背景图片填充(达到一定高度)容器 div

Question

我有一个容器 div，我在其中放置了两个背景图像，如下所示:

图像已删除

上图的CSS:

#test44{
background-image: url("images/reference_opt.png"),   url("images/content_opti11_opt.png");
background-position: 41px bottom, 82px 25px;
background-repeat: no-repeat, repeat-y;
background-size: 192px 292px, 1097px auto;
margin-bottom:10px;
min-height: 310px;

} 相应的标记:

<div id="test44">
<table>
<tr>
<td class="td">
<div >Reference 1</div></td>
<td>
<div class="content">
Your objective tells a prospective employer the type of work you are currently    pursuing. The rest of your resume should be designed to most effectively support your   objectivekuedyg djkhdbkd jd asjkds dkjdb
</div></td>
</tr>
</table>
</div>

但是我的要求是如下图所示:

图像已删除

Answer 1

与其使用两个背景图片(这不符合逻辑，而且可能很棘手)，不如使用两个 div；将最大的容器(即#test44)放在relative位置，对应background-image

然后你将放置另一个用于偏移图像的 div，并将其定位在 absolute 位置(相对于其父级)

这里是一个背景颜色的例子，与图像相同:jsfiddle