I have a container with a background image. Inside this container, there are additional elements like my navigation bar.
My goal is to make the container have the same height as the background image.
I've attempted the following:
.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>While this method has resulted in the bg div having the image's height, the container div ends up inside the background image.
What I actually need is for the bg div to only contain the navigation and other contents.
After that, the container should hold its contents separately.