make black layer opacity 0.5 front of the background image

Question

I would like to know if there is a way I can add a black layer over my Background image but have it slightly transparent so you can still see the Background image.

I am using Bootstrap 4 & below is the code I am using including CSS :)

Any help will be much appreciated. Thanks for help

<nav class="navbar navbar-expand-lg navbar-light bg-light ">
    <div id="container-fluid">
        <!-- <input type="checkbox" id="check" /> -->
        <div>
            <div><label for="check" class="chechbtn"><i id="chechbtn" class="fas fa-bars p-2"></i></label></div>
            <div><a class="navbar-1" href="{{url('/')}}"><img src="{{ asset('gelecek/img/logo.png') }}" alt="Logo" /></a></div>
        </div>
        <div>
            <div >
                <div class="collapse navbar-collapse " id="navbarText">
                    <ul class="navbar-nav mb-4 mb-lg-0">
                        <li class="nav-item">
                            <div class="dropdown">
                                <button class="dropbtn"><span>FAALİYETLERİMİZ</span></button>
                                <div class="dropdown-content">
                                    <ul>
                                        <li><a href="https://geleceginbilimi.com/gelecek-yuruyusu-3/"><span>Gelecek Yürüyüşü</span></a></li>
                                        <li><a href="https://geleceginbilimi.com/5-dakika-sohbetleri/"><span>5 Dakika Sohbetleri</span></a></li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li class="nav-item"><a class="nav-link" href="https://geleceginbilimi.com/blog/">BLOG</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">gelecek-uyeligi</a></li>
                        <li class="nav-item">
                            <div class="dropdown">
                                <button class="dropbtn"><span>HAKKIMIZDA</span></button>
                                <div class="dropdown-content">
                                    <ul>
                                        <li><a href="https://geleceginbilimi.com/12-gelecek-vizyonu/"><span>Gelecek Vizyonu</span></a></li>
                                        <li><a href="https://geleceginbilimi.com/12-gelecek-meclisi/"><span>Gelecek Meclisi</span></a></li>
                                        <li>
                                            <div class="dropdowndown">
                                                <button class="dropbtn"><span>Gelecek Şurası</span></button>
                                                <div class="dropdown-content">
                                                    <ul>
                                                        <li><a href="https://geleceginbilimi.com/11-gelecek-daveti/"><span>Gelecek Daveti</span></a></li>
                                                        <li><a href="https://geleceginbilimi.com/11-gelecek-akademisi/"><span>Gelecek Akademisi</span></a></li>
                                                        <li><a href="https://geleceginbilimi.com/11-gelecek-medya/"><span>Gelecek medya</span></a></li>
                                                        <li><a href="https://geleceginbilimi.com/11-gelecek-ajansi/"><span>Geleceğin ajansi</span></a></li>
                                                        <li><a href="https://geleceginbilimi.com/11-gelecek-toplumu/"><span>Gelecek toplumu</span></a></li>
                                                        <li><a href="https://geleceginbilimi.com/11-gelecek-isleri/"><span>Gelecek isleri</span></a></li>
                                                        <li><a href="https://geleceginbilimi.com/11-gelecek-tasavvuru/"><span> Gelecek tasavvuru</span></a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </li>
                                        <li><a href="https://geleceginbilimi.com/11-gelecek-tasarimcilari/"><span>Gelecek tasarimcilari</span></a></li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div>

                @auth
                <div class="mr-2"><a type="button" href="{{ route('dashboard') }}" class="btn btn-outline">User Profile <i class="fas fa-sign-in-alt ml-2"></i></a></div>

                @else
                <div class="mr-2"><a type="button" href="{{ route('login') }}" class="btn btn-outline">login <i class="fas fa-sign-in-alt ml-2"></i></a></div>

                @endauth

                <div><a href="https://globalfuturescience.com/" class="btn btn-outline">Global <i class="fas fa-globe-africa ml-2"></i></a></div>
              
            </div>
        </div>
    </div>
</nav>
<!-- Nav Bar End -->
<!-- Page Header Start -->



<div class="page-header mb-0" >
    <div class="container ">
        <div class="row">
            <div class="col-12" style="padding: 36px;">
                <h2>Gelecek Üyeliği</h2>
            </div>
        </div>
    </div>
</div>

CSS background image

 <style>
        .page-header{
            background-image: url(./gelecek/img/header_img.png);
           
        }
    </style>

Answer 1

You can use pseudo element ::after on your .page-header element. Make the .page-header position: relative so that the pseudo elements position properties will be relative to its position, then make your ::after position absolute and define the top and left properties to 0 so they line up with the page-header elements border box. The ::after pseudo element will have a height and width of 100% along with your black opaque layer using RGBA rgba(0, 0, 0, 0.5) -> black with a 0.5 opacity

.page-header {
  background-image: url(https://allhdwallpapers.com/wp-content/uploads/2015/07/Sky-4.jpg);
  position: relative;
}

.page-header::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(0,0,0,0.5);
}

.page-header h2 {
  color: white;
}

<div class="page-header mb-0">
  <div class="container ">
    <div class="row">
      <div class="col-12" style="padding: 36px;">
        <h2>Gelecek Üyeliği</h2>
      </div>
    </div>
  </div>
</div>

Answer 2

You can simply use background color along with the image like this;

.page-header {
  background-image: url(https://allhdwallpapers.com/wp-content/uploads/2015/07/Sky-4.jpg) rgb(163 204 170 / 50%);
}

I am using rgb(163 204 170 / 50%); with opacity, you can use color of your choice. Hope this will solve your problem. You can learn about colors with opacity from w3Schools.