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

Question

Я пытаюсь совместить изображение, которое охватывает два div. Я не слишком уверен в том, как установить атрибут position для этого и хотел бы, что делать. Это мой код:

<!-- NAVIGATION --> 

<div class="navigation"> 
    <div class="container"> 
     <div class="row"> 
      <ul> 
       <li class="navLink">HOME</li> 
       <li class="navLink">MENU</li> 
       <li class="navLink">JOUW SMAAK</li> 
       <li class="navLink">FOODTRUCK</li> 
       <li style="padding-right: 0px;" class="navLink">CONTACT</li> 
      </ul> 
     </div> 
    </div> 
</div> 

<!-- OPENING TIMES --> 

<div class="opening-times"> 
    MAANDAG - VRIJDAG <span class="spacer"></span> 17:00 - 22:00 
</div> 

<!-- END OPENING TIMES --> 

<!-- END NAVIGATION --> 

и это css. Я хотел бы разместить изображение как в разделе навигации, так и в режиме открытия. Поместил бы я все вокруг и сделаю это оттуда?

.navigation ul li { 
    display: inline-block; 
    padding-right: 4%; 
    padding: 7.5px 2% 0; 
    margin-left: 10%; 
} 


.opening-times { 
    font-size: 125%; 
    background-color: rgb(31, 39, 45); 
    color: rgb(109, 120, 125); 
    padding: 5px 0 5px; 
    text-align: center; 
} 

.spacer { 
    padding: 0 40px 0 40px; 
} 

Answer 1

Вы могли бы попробовать что-то вроде этого:

Оберните элементы, которые вы хотите, чтобы покрыть с изображением:

<div class="cover"> 
    Elements to cover here.. 
</div> 

Затем добавьте эти стили делая изображение в видоискателе background-image:

.cover { 
    position: relative; 
} 

.cover:after { 
    content: " "; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background-size:cover; 
    background-image: url(https://placehold.it/100x100); /*Your image here*/ 
} 

См. Это fiddle для демонстрации