Dynamic div height for set of divs

Question

I have a parent div and two children. I want the height of the children to remain constant at 75% and 25% of the parent height.

The issue I have is that I need the parent to have a height set by a background image. That is it should shrink responsively but always present the same area of the image.

Here is a a diagram of the behaviour:

Child A contains text. To be totally honest I don't care how high child A is as long as the text is displayed. I need child B to maintain it's height as a proportion of the parent and its position at the bottom of the parent div.

I would like to know if there is a reasonable pure css solution to this problem.

Answer 1

This issue is addressed here

div {
    background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-top: 66.64%; /* (img-height / img-width * container-width) */
                /* (853 / 1280 * 100) */

    position:relative;
}

Add these styles to child "div"

A div=>

width:100%;height:75%;background-color: lightblue;position:absolute; top:0; bottom:0; left:0

B div=>

width:100%;height:25%;background-color: green;position:absolute; top:75%; bottom:0; left:0; right:0;