How to keep a background image at background always at bottom in 100% height div?

Question

This question is related to this How to fill the the available height on screen with the div for any height?

How to keep a background image at background always at bottom in 100% height div? and I want to show only a specific portion of background image?

Answer 1

Try this:

html:

<div id='a'>
    <div id='b'></div>
</div>

css:

#a, html, body{
    height: 100%;
}
#a {
    width: 300px;
    background-color: #dde;
    border: 1px solid #99c;
    position:relative;
    overflow: hidden
}

#b {
    width: 50px; 
    height: 50px;
    background-color: #99c;
    border: 1px solid #54a;
    position: absolute;
    bottom: -25px;
    left: 125px;
}

You'll need to actually add the bg image to b.