Partial overlap two background images in CSS - html

Question

I'm trying to overlap two images in CSS: the first one is a "background" image of the main menu and the second is the "cover" of the front page. The issue is that the first one is a png with transparency and it needs to display above the cover (right now, it doesn't goes beyond the div container).
Right now the result is this:
But the first image, the one under #menu .container-fluid is this:
The current code:
HTML
<section>
<div id="menu">
<div class="container-fluid">
<!-- Content of menu -->
</div>
</div>
<div id="portada">
<figure class="proporcion-fija-indice"></figure>
</div>
</section>
CSS
.proporcion-fija-indice {
display: block;
margin: 0;
padding-top: 48.30%; /* 2026px/4194px = 0.4830 */
background-image: url('../img/portada.jpg');
background-size: cover;
background-position: center center;
}
#menu .container-fluid {
background-image: url('../img/header.png');
min-height: 125px;
}
Any ideas of how to achieve the desired result?

Answer 1

Have you tried making the header higher, and setting a negative margin-top on proporcion-fija-indice?
.proporcion-fija-indice {
display: block;
margin: 0;
padding-top: 48.30%; /* 2026px/4194px = 0.4830 */
background-image: url('../img/portada.jpg');
background-size: cover;
background-position: center center;
margin-top:-50px;
}
#menu .container-fluid {
background-image: url('../img/header.png');
min-height: 150px;
}

Answer 2

You can use z-index
#menu .container-fluid {
background-image: url('../img/header.png');
min-height: 125px;
z-index:1;
}
another approach would be using position absolute in the #menu...this might need some adjustments..

Answer 3

This is an example of how you can make it work :
#menu {
background-image: url("https://i.stack.imgur.com/zRInk.png");
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
background-repeat: no-repeat
}
#portada {
background-image: url("https://cdn-images-1.medium.com/max/1500/1*d2MAPp7120q_8x6Ue8KYmQ.png");
width: 100%;
height: 100%;
z-index: -2;
position: absolute;
top: 0px;
left: 0px;
background-repeat: no-repeat
}
<section>
<div id="menu">
<div class="container-fluid">
</div>
</div>
<div id="portada">
<figure class="proporcion-fija-indice"></figure>
</div>
</section>