In general HTML writes things in the order they are written so writing the menu after the image should allow the image to be under the menu.

Otherwise you can use the CSS z-index property to set the stacking order of containers like divs.

So either write your image first, or add e.g. z-index:1; to all the .topnav CSS declarations

I am currently working on my first website and I am having a problem with my navigation bar. I have an image which I want to use as showcase but for it to be behind the navigation buttons. Here is my code:

HTML:

<script src="./js/navbar.js"></script>
<div class="nav-bar">
    <div class="topnav" id="myTopnav">
        <a href="index.html" class="active" id="logo-header">YourLocalArtist</a>
        <a href="contact.html" style="float: right;">Contact us</a>
        <a href="about.html" style="float: right;">About</a>
        <a href="store.html" style="float: right;">Store</a>
        <img src="./img/showcase.jpeg">
        <a href="javascript:void(0);" class="icon" onclick="myFunction()">
            <i class="fa fa-bars"></i></a>

    </div>
</div>

CSS:

.topnav a {
float: left;
display: block;
color: grey;
text-align: center;
padding: 20px 40px;
text-decoration: none;
font-size: 25px;

}

.topnav a:hover {
background-color: #f4f4f4;
text-decoration: underline;
font-weight: 600;
color: black;
}


.topnav a.active {
background-color: #f4f4f4;
text-decoration: underline;
font-weight: 600;
color: black;
}



.topnav .icon {
display: none;
}

Thanks in advance!