Частичное перекрытие двух фоновых изображений в CSS

Question

Я пытаюсь перекрыть два изображения в CSS: первое - это «фоновое» изображение главного меню, а второе - «обложка» главной страницы.Проблема в том, что первый - это png с прозрачностью, и он должен отображаться над обложкой (сейчас он не выходит за пределы контейнера div).

Прямо сейчас результат таков:

Но первое изображение, которое находится под # menu .container-liquid , выглядит так:

Текущий код:

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;
}

Есть идеи, как добиться желаемого результата?

Answer 1

Вы пытались сделать верхний колонтитул выше и установить отрицательный маржинальный верх для пропорций-фидж-индексов?

.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

Это пример того, как вы можете заставить его работать:

#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>

Answer 3

Вы можете использовать z-index

#menu .container-fluid {
  background-image: url('../img/header.png');
  min-height: 125px;
  z-index:1;
}

другой подход будет использовать абсолютное положение в #меню ... это может потребовать некоторых корректировок.