the image in the menu has to be transparant with blue rgba color?

Hello,

I want to make the image in the menu-bar container transparant so I found that I have to use rgba color code with combination of z-index:-1 to make an image transparant.

this is my code :

.menu-bar{
position:absolute;
top:0;
left:0;
width:100%;
height:70px;
background-color:rgba(13,110,139,0.75); 
transition:0.5s;
transform: translatex(-100%);
background: url("https://webdesignleren.com/wp-content/uploads/2023/01/auto-image-for-Home-page-900-500.jpg") center center;
background-size: cover;
z-index:-1:

}

when you open the menu container on my homepage you can see the background image but whitout transparancy (of blue color) which has to cover the image.

how I can solve this problem?

thanks

The page I need help with: [log in to see the link]