Изображение за панелью навигации

Question

чтобы сделать целевую страницу для моего проекта, например this , используя bootstrap 4 и html, не в состоянии скрыть фоновое изображение за панелью навигации

Answer 1

Что я понимаю по вашему вопросу, так это то, что вам нужно скрыть свое изображение за панелью навигации после прокрутки страницы, для этого вам нужно исправить панель навигации.Вы просто используете «position: fixed» для вашего класса навигационной панели.

Answer 2

Я сделал это на моей Codepen учетной записи, единственное отличие состоит в том, что вам придется изменить место, где я поместил логотип на панель навигации, и не делать его центром img div., сделайте это, чтобы толчок к вершине как пример, который Вы предоставили.

См. Ниже:

<div class="header_img">

    <div class="row logo-container-div align-items-center justify-content-center">
     <div class="logo-wrapper col-auto" >
       <h1>LOGO HERE</h1>
       <p>Some additional text</p>
    </div>
    </div>
  </div>

CSS:

.header_img {
    height: 800px;
    width: 100%;
    background-image: linear-gradient(150deg, rgba(68, 0, 139, 0.7), rgba(47, 0, 120, 0.6) 10%, rgba(27, 57, 129, 0.5) 30%, rgba(41, 123, 192, 0.5) 50%, rgba(114, 240, 255, 0.6) 86%, rgba(84, 183, 249, 0.7)), url("http://www.strawberryproofing.co.uk/images/nature_large1.png");
    background-position: 0%, 0%, 50%, 50%;
    background-attachment: scroll, fixed;
    background-size: auto, cover;
}


.logo-container-div {
  min-height: 70vh;

}

.logo-wrapper {

    font-family: 'Raleway', sans-serif;
    padding: 25px 30px;
    border: 2px solid white;
    color:#fff;
    text-align:center;
    position: fixed;

  }

.logo-wrapper h1 {
  font-size: 36px;
}

.logo-wrapper p {
 font-size: 18px; 
}

Смотрите здесь: https://codepen.io/billyfarroll/pen/qYWYYV

Вам понадобится flex: justify и align элементы и background-position & background-size