CSS - Nav transparent background while menu opaque

Question

I am working on the theme where the header is currently transparent - no colour assigned to it. There is a logo image and navigation div going over it as you can see.

I would like to give the header black colour and make it 0.5 transparent, so the white menu over it is more visible.

My issue is that when I try to assign the black colour to either of the header div elements and assign the opacity, the whole thing goes transparent including the logo and menu that's supposed to be on top.

There is a following structure of the header menu:

<div class="main_header">
    <div class="header_parent_wrap">
       <header>
          <div class="logo_section">
             <a class="logo">
                 <img>
             </a>
          </div>
          <div class="menu_section">
             <div class="menu"></div>
          </div>
       </header>
    </div>
</div> 

I am trying to assign black and opacity to either the main_header element or the header_parent_wrap element like this:

.header_parent_wrap {
    background-color: #000000;
    opacity: 0.5;
}

But again when I do that, the entire thing goes transparent including the navigation menu and logo image.

How can I achieve to have black and half transparent background only, not the image or the menu?

Answer 1

You should try this

.header_parent_wrap {
    background: rgba(0, 0, 0, 0.5);
}

Instead of giving opacity give background rgba