Display website background underneath transparent navigation bar - html

Question

I need my background-image to display underneath my website transparent navigation bar. The image is located under the .header div
http://prntscr.com/p2moi0
<!Navigation Bar>
<nav>
<div class="navigation-bar">
<img class="logo" src="images/logo-black.png">
Home
Services
Pricing
faq
Contact
</div>
</nav>
<div class="header">
<h1>Website development<br> made easy</h1>
<h3>Not just a business but a reliable business partner</h3>
<button type="button" class="button button-1">get started</button>
<button type="button" class="button button-2">get a quote</button>
</div>
</body>
.header{
background-image: url('images/main-background-header.png');
background-position: center;
height: 100%;
background-repeat: no-repeat;
position: relative;
top: 0;
text-align: center;
.navigation-bar {
width: 100%;
height: 80px;
background-color: transparent;
}

Answer 1

to make it work add background div to your header with height equal to full header height + your navbar height
. your navbar should have a z-index of -1 and the background div should have an absolute position relative to the header:
*{
margin:0;
padding:0;
}
.image{
background-image: url('https://picsum.photos/800');
background-position: center;
height: calc(100% + 80px);
width:100%;
background-repeat: no-repeat;
position: absolute;
z-index:-1;
top: -80px;
text-align: center;
}
.navigation-bar {
width: 100%;
height: 80px;
background-color: transparent;
}
.header{
position:relative;
text-align:center;
color:white;
padding:10px 0px;
}
.navigation-bar{
display:flex;
background:rgba(255,255,255,0.5);
align-items:center;
}
.navigation-bar img{
margin-right:10px;
}
.navigation-bar a{
margin-left:10px;
color:white;
padding:10px;
text-decoration:none;
}
.navigation-bar a:hover{
background-color:white;
color:black;
}
<!Navigation Bar>
<nav>
<div class="navigation-bar">
<img class="logo" src="images/logo-black.png">
Home
Services
Pricing
faq
Contact
</div>
</nav>
<div class="header">
<div class="image"></div>
<h1>Website development<br> made easy</h1>
<h3>Not just a business but a reliable business partner</h3>
<button type="button" class="button button-1">get started</button>
<button type="button" class="button button-2">get a quote</button>
</div>
</body>

Answer 2

Just reset the elements margin and it will work. That is done by making every element
margin:0.
See the example bellow:
*{
margin: 0;
}
.header{
background-image: url('https://i.cbc.ca/1.4955357.1545355364!/fileImage/httpImage/image.jpg_gen/derivatives/16x9_780/man-works-late-at-office-computer.jpg');
background-position: center;
height: 100%;
background-repeat: no-repeat;
position: relative;
top: 0;
text-align: center;
}
.navigation-bar {
width: 100%;
height: 80px;
background-color: transparent;
}
<nav>
<div class="navigation-bar">
<img class="logo" src="images/logo-black.png">
Home
Services
Pricing
faq
Contact
</div>
</nav>
<div class="header">
<h1>Website development<br> made easy</h1>
<h3>Not just a business but a reliable business partner</h3>
<button type="button" class="button button-1">get started</button>
<button type="button" class="button button-2">get a quote</button>
</div>

Answer 3

try like this
HTML
<div class="banner">
<nav>
<div class="navigation-bar">
<img class="logo" src="images/logo-black.png">
Home
Services
Pricing
faq
Contact
</div>
</nav>
<div class="header">
<h1>Website development<br> made easy</h1>
<h3>Not just a business but a reliable business partner</h3>
<button type="button" class="button button-1">get started</button>
<button type="button" class="button button-2">get a quote</button>
</div>
</div>
css
.banner{
background-image: url('https://image.freepik.com/free-psd/abstract-background-design_1297-73.jpg');
background-position: center;
height: 100%;
background-repeat: no-repeat;
position: relative;
top: 0;
text-align: center;
padding:40px 0;
}
.nav {
width: 100%;
height: 80px;
background-color: transparent;
text-align:center;
}