make black layer opacity 0.5 front of the background image [duplicate] - html

Question

This question already has answers here:
Can I have multiple background images using CSS?
(8 answers)
Closed 1 year ago.
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><span>Gelecek Yürüyüşü</span></li>
<li><span>5 Dakika Sohbetleri</span></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><span>Gelecek Vizyonu</span></li>
<li><span>Gelecek Meclisi</span></li>
<li>
<div class="dropdowndown">
<button class="dropbtn"><span>Gelecek Şurası</span></button>
<div class="dropdown-content">
<ul>
<li><span>Gelecek Daveti</span></li>
<li><span>Gelecek Akademisi</span></li>
<li><span>Gelecek medya</span></li>
<li><span>Geleceğin ajansi</span></li>
<li><span>Gelecek toplumu</span></li>
<li><span>Gelecek isleri</span></li>
<li><span> Gelecek tasavvuru</span></li>
</ul>
</div>
</div>
</li>
<li><span>Gelecek tasarimcilari</span></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>Global <i class="fas fa-globe-africa ml-2"></i></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.