I'm sorry if the title make you confused, but Can we make an Image Background appear in front of navbar background but in back of the navbar icon?

Currently my progress looks like this

[![My Progress](https://i.stack.imgur.com/krY4r.png)](https://i.stack.imgur.com/krY4r.png)

You can see that **the image successfully appear in front of navbar background but failed to appear behind navbar text or icon**, you can see especially where image cover `home` instead appear behind it.

I fully aware too if navbar have a default `z-index: 4` so I set image to have `z-index: 5` and **home, news, and contact** to have `z-index: 6` but it still looks like the image I show you

This is My code if you want to try it

```js
window.onscroll = function() {myFunction()};

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}
```

```css
body {
  margin: 0;
  font-size: 1em;
  font-family: Arial, Helvetica, sans-serif;
}

.header {
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
}

#navbar {
  overflow: hidden;
  background-color: #333;
  z-index: 4;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 0.8em;
  text-align: right;
  z-index: 6
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

#navbar a.active {
  background-color: #4CAF50;
  color: white;
}

.content::before{
    position: absolute;
    top: 0px;
    left: 0px;
    content: "";
    height: 600px;
    width: 600px;
    background: url("https://freepngimg.com/thumb/castle/23440-6-fantasy-castle-picture.png");
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 5;
}

.content {
  padding: 16px;
  margin-top: 400px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 60px;
}
```

```html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

<div id="navbar">
  <a class="active" href="javascript:void(0)">Home</a>
  <a href="javascript:void(0)">News</a>
  <a href="javascript:void(0)">Contact</a>
</div>

<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Bibendum arcu vitae elementum curabitur vitae nunc sed. Massa enim nec dui nunc mattis enim. Proin sed libero enim sed faucibus turpis in eu mi. Metus dictum at tempor commodo ullamcorper a lacus vestibulum. Venenatis lectus magna fringilla urna porttitor rhoncus. Hac habitasse platea dictumst quisque sagittis purus sit. Posuere ac ut consequat semper viverra nam. Viverra orci sagittis eu volutpat odio. Nec feugiat in fermentum posuere.

Iaculis eu non diam phasellus vestibulum lorem sed risus. Hendrerit gravida rutrum quisque non tellus orci ac auctor augue. Tristique et egestas quis ipsum. Egestas quis ipsum suspendisse ultrices gravida dictum. Morbi tempus iaculis urna id. Ullamcorper sit amet risus nullam eget felis eget. Tincidunt arcu non sodales neque sodales ut. Posuere ac ut consequat semper. Est sit amet facilisis magna etiam tempor orci. Porttitor leo a diam sollicitudin tempor id eu. Sed velit dignissim sodales ut eu sem integer vitae justo. Viverra nibh cras pulvinar mattis nunc sed.

Ornare suspendisse sed nisi lacus. Ultrices tincidunt arcu non sodales neque sodales ut etiam. Sapien eget mi proin sed libero enim sed faucibus turpis. In vitae turpis massa sed elementum tempus egestas sed. Sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. Mus mauris vitae ultricies leo integer malesuada nunc. Vel risus commodo viverra maecenas accumsan. Convallis tellus id interdum velit laoreet id donec ultrices. Sit amet mauris commodo quis imperdiet massa tincidunt. Condimentum vitae sapien pellentesque habitant morbi tristique senectus et.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Bibendum arcu vitae elementum curabitur vitae nunc sed. Massa enim nec dui nunc mattis enim. Proin sed libero enim sed faucibus turpis in eu mi. Metus dictum at tempor commodo ullamcorper a lacus vestibulum. Venenatis lectus magna fringilla urna porttitor rhoncus. Hac habitasse platea dictumst quisque sagittis purus sit. Posuere ac ut consequat semper viverra nam. Viverra orci sagittis eu volutpat odio. Nec feugiat in fermentum posuere.

Iaculis eu non diam phasellus vestibulum lorem sed risus. Hendrerit gravida rutrum quisque non tellus orci ac auctor augue. Tristique et egestas quis ipsum. Egestas quis ipsum suspendisse ultrices gravida dictum. Morbi tempus iaculis urna id. Ullamcorper sit amet risus nullam eget felis eget. Tincidunt arcu non sodales neque sodales ut. Posuere ac ut consequat semper. Est sit amet facilisis magna etiam tempor orci. Porttitor leo a diam sollicitudin tempor id eu. Sed velit dignissim sodales ut eu sem integer vitae justo. Viverra nibh cras pulvinar mattis nunc sed.

Ornare suspendisse sed nisi lacus. Ultrices tincidunt arcu non sodales neque sodales ut etiam. Sapien eget mi proin sed libero enim sed faucibus turpis. In vitae turpis massa sed elementum tempus egestas sed. Sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. Mus mauris vitae ultricies leo integer malesuada nunc. Vel risus commodo viverra maecenas accumsan. Convallis tellus id interdum velit laoreet id donec ultrices. Sit amet mauris commodo quis imperdiet massa tincidunt. Condimentum vitae sapien pellentesque habitant morbi tristique senectus et.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Bibendum arcu vitae elementum curabitur vitae nunc sed. Massa enim nec dui nunc mattis enim. Proin sed libero enim sed faucibus turpis in eu mi. Metus dictum at tempor commodo ullamcorper a lacus vestibulum. Venenatis lectus magna fringilla urna porttitor rhoncus. Hac habitasse platea dictumst quisque sagittis purus sit. Posuere ac ut consequat semper viverra nam. Viverra orci sagittis eu volutpat odio. Nec feugiat in fermentum posuere.

Iaculis eu non diam phasellus vestibulum lorem sed risus. Hendrerit gravida rutrum quisque non tellus orci ac auctor augue. Tristique et egestas quis ipsum. Egestas quis ipsum suspendisse ultrices gravida dictum. Morbi tempus iaculis urna id. Ullamcorper sit amet risus nullam eget felis eget. Tincidunt arcu non sodales neque sodales ut. Posuere ac ut consequat semper. Est sit amet facilisis magna etiam tempor orci. Porttitor leo a diam sollicitudin tempor id eu. Sed velit dignissim sodales ut eu sem integer vitae justo. Viverra nibh cras pulvinar mattis nunc sed.

Ornare suspendisse sed nisi lacus. Ultrices tincidunt arcu non sodales neque sodales ut etiam. Sapien eget mi proin sed libero enim sed faucibus turpis. In vitae turpis massa sed elementum tempus egestas sed. Sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. Mus mauris vitae ultricies leo integer malesuada nunc. Vel risus commodo viverra maecenas accumsan. Convallis tellus id interdum velit laoreet id donec ultrices. Sit amet mauris commodo quis imperdiet massa tincidunt. Condimentum vitae sapien pellentesque habitant morbi tristique senectus et.
</div>

</body>
</html>
```

can someone help me to try to solve this? I'm stuck in this problem