I am trying to add a background image to a main header that contains a navbar, but I am having trouble getting the image to display correctly.
Here is the jsfiddle link for reference: http://jsfiddle.net/Mwanitete/fgkq759n/8/
Here is the HTML code snippet:
<div class="marketing-main-header_banner">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<!-- Navbar content goes here -->
</nav>
</div>
And here is the CSS code snippet:
html, body{
height: 100%;
margin: 0px;
}
* {
box-sizing: border-box;
}
.marketing-main-header_banner{
background-image: url("https://thumb.ibb.co/eodzqU/Path_47.png" alt="Path_47");
background-size: cover;
background-repeat: no-repeat;
background-position: 100% 100%;
position: relative;
height: 900px;
}
I have included an image of what I currently have and what I am trying to achieve. The issue is that the navbar is displaying on top of the image, rather than below it. Can anyone suggest what I might be missing in my code?