Brine Template: How do you make the main banner image go behind the Header navigation?

Site URL: https://nectarine-circle-ngf5.squarespace.com/

https://nectarine-circle-ngf5.squarespace.com/
password: apod

Here is the site URL, the problem i am facing at the moment is quite an odd one... So first of all Using CSS I changed the header to have an image behind it.

.Header--top {

  display: none;
  background-image: url("https://static1.squarespace.com/static/5e28e3821bc1146fbddc88f8/t/5e36482d21662377966f68f8/1580615725729/Base.png");
  background-size: 100% 100%;
}

What I am trying to do is make it so that the image goes behind the navigation, however when setting the header z-index to higher values nothing happens. Behind the navigation there is a white background and I am finding out that is the the background color of the whole page. I am really hitting a lot of walls here if anyone could help.