Fill (to a certain height) a div container with a background image

Question

I have a div container in which I placed two background images, as shown below:

Image deleted

CSS above image:

#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;

} Corresponding markup:

<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>

But my requirement is similar to the image shown below:

Image deleted

Answer 1

Instead of using two background images (which is not entirely logical and can be complicated), you better use two divs; put the largest container (i.e. # test44) in position relativewith the appropriatebackground-image

Then you put another div to be used for the offset image, and put it in position absolute(relative to its parent)

, : jsfiddle

Answer 2

, CSS:

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

#test44:after {
    background-image: url("images/reference_opt.png");
    background-position: 41px bottom;
    background-size: 192px 292px;
    height: *height of image*;
    width: *width of image*;
    content: '';
    display: block;
    position: absolute;
    bottom: -something;
    left: 0;
}

, . :after div, .