How to get height of responsive div's background-image - css

Question

I have a div with a background image. This div has some other dive inside, like my navigation.
I would like to have this div have the same height of the background image.
My tries have been:
.bg {
width: 100 %;
display: inline - block;
}
.bg::after {
background: url('/images/desktop2.png') no - repeat center top;
background - size: 100 % auto;
content: "";
opacity: 0.8;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z - index: -1;
}
<div class="bg">
<div class="navigation"></div>
<div>Other contents</div>
</div>
<div class="container">
<div>First content</div>
<div>
<Second content</div>
...
</div>
In this way I'm getting the bg div to have the image height, but the container div arrives inside the div background image.
I need the bg div to have just and only the navigation and Other contents.
After this div I need the container with its contents

Answer 1

you may use a pseudo and padding to expand height of your container to fit the known ratio of your background-image:
example
.bg-ratio {
background: url(https://baconmockup.com/1024/576) no-repeat red/* only to check ratio height */
;
background-size: 100% auto;
overflow: hidden;
/* to see the floatting pseudo */
font-size: 5vmax;
color: white;
text-shadow:0 0 1px black;
}
.bg-ratio:before {
content: '';
float: left;
padding-top: 56.25%;
/* (576px / 1024px) x 100 */
}
body {
width: 80%;
margin: auto;
}
<div class="bg-ratio">
<header>content in here</header>
<main>
<p>play full page and resize window's width</p>
</main>
</div>
How to grow height of an element to match a ratio ?
vertical margins or paddings in percentage value will be calculated from parent's width. padding-top : 100% will be equal to parent's width. If set on a pseudo, an empty box will expand to be a square (ratio 1:1 ).
Source: https://www.w3.org/TR/CSS2/box.html#padding-properties
<length>
Specifies a fixed width.
<percentage>
The percentage is calculated with respect to the width of the generated box's containing block, even for 'padding-top' and 'padding-bottom'. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.
Unlike margin properties, values for padding values cannot be negative. Like margin properties, percentage values for padding properties refer to the width of the generated box's containing block.
If the container span the whole screen, you may use vw units via height or min-height and drop the pseudo.
.bg-ratio {
background:
url( https://baconmockup.com/1200/100)
no-repeat
red /* only to check ratio height */;
background-size:100% auto;
height:8.33vw;/* (100px / 1200px) x 100 */
}
body {
margin:auto;
}
<header class="bg-ratio">
<div>content in here</div>
</header>
<main>play full page and resize window's width</main>