How to lay my nav bar over image? [duplicate] - css

Question

This question already has answers here:
Position text over image
(4 answers)
Closed 6 years ago.
I am trying to lay my lay my nav bar (#media min width 50em) over my my mainimage. I have tried using mainimage as a background url to my navbar but it I cannot adjust the height. Is there a way to just push mainimage to the top of page and have my nav bar lay over the top of it?
Here is a link to my jsfiddle:
https://jsfiddle.net/shannonhart82/93ekqmhq/1/
<nav>
<ul>
<li>About </li>
<li>Menu</li>
<li><img class="logo" src="fjc.svg"></li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</nav>
<img class="mainimage" src="http://www.andypost.com/media/original/Andy- Post-Food-Photography-Waffle-with-Syrup.jpg" width="100%">
nav li a {
display: inline-block;
background-color: #9CD5CF;
top: 0;
padding: 70px;
width: 150px;
text-decoration: none;
color: #000;
}
#nav-icon3 {
display: none;
}
nav {
display: block;
width: 100%;
position: relative;
top: 0;
left: 0;
}
nav li {
display: inline-block;
background-color: none;
color: black;
text-align: center;
vertical-align: middle;
}
nav ul {
text-align-last: center;
}
Here is what I am trying to do:

Answer 1

You could something like this with rest of your styles
.nav{
z-index: 2;
}
img{
z-index: 1;
}

Answer 2

try creating a div around the nav, and put this in css
html
<div class="divclass">
<nav>
<ul>
<li>About </li>
<li>Menu</li>
<li><img class="logo" src="fjc.svg"></li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</nav>
</div>
css
.divclass {
height:200px;
background-image: url("http://www.andypost.com/media/original/Andy- Post-Food-Photography-Waffle-with-Syrup.jpg");
}