Bootstrap CSS фиксированное позиционирование bg

Question

Я работаю над веб-сайтом, основанным на начальной загрузке, HTML и CSS, который имеет такую ​​структуру в HTML:

wrapper for fixed footer at bottom {
  content
  fixed bg
  content
}

Оболочка вокруг всего имеет относительное расположение.Сам фиксированный bg будет ::

figure {
  position: relative;
  width: 100%;
  height: 60%;
  margin: 0!important;
}
.fixed-wrap {
  clip: rect(0, auto, auto, 0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#fixed {
  background-image: url('img/mac.png');
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  will-change: transform;
}

<figure>
 <div class="fixed-wrap">
    <div id="fixed">
   </div>
 </div>
</figure>

Проблема заключается в том, что фиксированный bg и содержимое ниже не придерживаются правильных мест.Я думаю, что проблема здесь в моем css.

С этим css фиксированный bg вообще не отображается.Если я изменю положение фигуры на абсолютное, оно будет показано, но форма контакта перекрывает его.Это мой первый пост, извините, если он немного грязный или я что-то не так сделал.

Answer 1

height: 60% вашего figure будет 0, так как это должно быть 60% родительского элемента, а ваш родитель имеет 0 высоту.Попробуйте определить высоту родительского элемента в пикселях.Например, body или любой другой родительский тег.