I'm struggling to position the banner image behind the navigation bar on my website. It keeps appearing below the navigation bar, but I want it to be positioned behind the navigation bar instead.
Here is the code I'm using:
* {
margin: 0;
padding: 0;
}
header .container {
display: flex;
justify-content: space-between;
align-items: center;
height: 89px;
}
nav {
overflow: hidden;
background-color: rgba(28, 28, 28, 0.4);
width: 1368px;
height: 89px;
}
ul {
display: flex;
justify-content: space-around;
list-style-type: none;
margin: 0;
}
li a {
display: inline-block;
color: #ffffff;
text-align: center;
vertical-align: middle;
padding: 37px 33px;
text-decoration: none;
font-family: 'Open Sans';
font-size: 15px;
}
ul .search-container {
margin-top: 18px;
margin-bottom: 24px;
padding-right: 41px;
}
::placeholder {
font-family: 'Open Sans';
font-size: 15px;
color: #1c1c1c;
}
ul input[type=text] {
width: 382px;
height: 38px;
border: none;
outline: none;
border-radius: 3px;
font-family: 'Open Sans';
font-size: 15px;
color: #1c1c1c;
background-color: #ffb606;
background-image: url("Images/Search.png");
background-repeat: no-repeat;
background-position: 10px;
padding: 14px 45px 14px 45px;
}
button {
background-color: transparent;
outline: none;
border: none;
}
#CartIcon {
padding-right: 31px;
}
#AccountIcon {
padding-right: 44px;
}
.SpecialOffer {
position: relative;
overflow: hidden;
}
.background {
position: absolute;
width: 100%;
height: 426.5px;
background-image: url("Images/Banner.png");
background-size: cover;
background-color: center center;
background-repeat: no-repeat;
}<body>
<header>
<div class="container">
<a href="home.html" title="Home"><img src="Images/Logo.jpg" alt="Logo" width="152 px" height="87px"></img>
</a>
<nav>
<ul>
<li><a href="home.html" title="Home">Home</a></li>
<li><a href="#" title="Products">Products</a></li>
<li><a href="#" title="About">About</a></li>
<li><a href="#" title="Contact">Contact</a></li>
<div class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="Search..." name="search">
</form>
</div>
<button type="submit"><a href = "#"><img src = "Images/Cart.png" id = "CartIcon"></a></button>
<button type="submit"><a href = "#"><img src = "Images/Account.png" id = "AccountIcon"></a></button>
</ul>
</nav>
</div>
</header>
<main>
<div class="SpecialOffers">
<div class="background">
</div>
</div>
</main>
</body>If anyone has a solution to fix this issue, it would be greatly appreciated. Thank you!