Html/css: Поместите элементы за повторяющийся фон

Question

Я пытаюсь найти способ поместить навигационную панель за некоторыми фоновыми изображениями, которые повторяются. Вот он:

В принципе, я хочу иметь навигационную панель позади изображения повторяющихся растений, но перед изображением солнца. Я собираюсь сделать всплывающие окна nav, когда они зависнут. Вот мой CSS для заголовка:

header { 
    height: 250px; 
    width: 100%; 
    background-image: url("top.png"), url("banner.png"); 
    background-repeat: repeat-x, no-repeat; 
    background-size: auto 40px, cover; 
    background-position: bottom; 
} 

Answer 1

Часть решения заключалась в использовании z-индекса в качестве упоминания Howzieky, но не являющегося примером для. Вот как я это сделал:

CSS:

header { 
    height: 250px; 
    width: 100%; 
    position: relative; 
} 

#background-far { 
    height: 250px; 
    width: 100%; 
    background-image: url("banner.png"); 
    background-repeat: no-repeat; 
    background-size: cover; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 0; 
} 

#header-body { 
    height: 250px; 
    width: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 1; 
} 

#background-close { 
    height: 250px; 
    width: 100%; 
    background-image: url("top.png"); 
    background-repeat: repeat-x; 
    background-size: auto 40px; 
    background-position: bottom; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 2; 
} 

HTML:

<header> 
    <div id="background-far"></div> 
    <div id="header-body"> 
     <img src="logo.png"/> 
    </div> 
    <div id="background-close"></div> 
</header> 

Я также необходимо разделить заголовок на 3 секции (фон-далеко, заголовок-тело и фон-близко). Тело заголовка будет хранить все, что у меня будет в заголовке, например, на панели навигации. Важная роль состояла в том, чтобы использовать заголовок position: relative и каждый раздел использовать position: absolute; top: 0; left: 0;

Спасибо за вашу помощь!

Answer 2

Я бы порекомендовал z-index. От W3Schools:

«Свойство Z-индекс определяет порядок стека элемента

Элемент с большим порядком стека всегда впереди элемент с более низким порядком стека..»

Чем больше элемент z-index элемента, тем ближе к нему находится элемент.