CODEWITHSUNDEEP
css
ABC
ABC

Reputation: 4373

Fill(upto certain height) container div with background image

I have container div in which I have placed two background image as shown below:

Image removed

CSS of 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 like the image shown below:

Image removed

Upvotes: 4

Views: 631

Answers (2)

Sander Koedood
Sander Koedood

Reputation: 6337

You could position the second image at the bottom absolutely by using the following 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;
}

This should position it nicely at the bottom, even when the content gets bigger. The :after function creates some sort of extra element after your div, which you use as image here.

Upvotes: 1

J&#233;r&#233;my Dutheil
J&#233;r&#233;my Dutheil

Reputation: 6137

Instead of using two background-image (which is not really logical, and can be tricky), you'd better use two divs ; put the biggest container (ie #test44) in relative position, with the corresponding background-image

Then you'll put another div that will serve for the offset image, and position it absolute position (relative to its parent)

Here is an example with background-color, works the same with images : jsfiddle

Upvotes: 4

Related Questions