decrease brightness of image without affecting elements on image - html

Question

I am a beginner working on a front end project with HTML and CSS where on my website I have a welcoming picture which I include below :
I try to adjust the brightness of the image for better contrast using filter:brightness() on my image
However when I apply filter:brightness(50%); the brightness of the image obviously decreases but I lose the display of my logo on the left and my navbar on the right. I do not understand why this is happening and I would appreciate your help. My code :
.html,.body{
background-size: cover;
}
body{
overflow-x: hidden;
margin:0;
background: rgba(0, 0, 0, 0.1);
font-family: Arial, Helvetica, sans-serif;
}
.welcome-container{
position: relative;
top:0px;
left: 0px;
width:100%;
height:550px;
margin:0px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.welcome-pic{
position: relative;
}
.welcome-pic h5{
position: absolute;
top:0%;
left:6%;
}
#fly{
font-size: 55px;
}
.welcome-pic img{
background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('file:///Volumes/Animus/Jon/Dropbox/website/hellcity.jpg');
}
#welcome-plane{
filter: brightness(50%);
}
#book{
position: relative;
background-color: white;
border: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
top:50%;
left:30%;
cursor: pointer;
}
.square-container{
position: absolute;
top: 2px;
left: 2%;
}
.ds-square{
background-color: red;
height: 50px;
width:50px;
opacity:1;
}
.ds-square span{
position: relative;
top:30%;
left:27%;
color:white;
font-size:20px;
}
.welcome-pic img {
width:100%;
height:550px;
opacity: 1;
}
.inside-pic{
position:absolute;
top:30%;
left:50%;
font-size: 60px;
transform: translate(-50%, -50%);
}
.welcome-pic ul{
position: absolute;
top:2px;
right:0%;
margin:0;
padding:0;
overflow:hidden;
background-color: transparent;
}
.welcome-pic li{
float:left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size:20px;
}
.inside-pic h3{
font-size:18px;
}
<div class = "welcome-container">
<div class = "welcome-pic">
<h5>DS <br/> AIRLINES</h5>
<div class="square-container">
<div class="ds-square">
<span id = "DS">DS</span>
</div>
</div>
<ul>
<li><a class="active" href = "#home">Home</a></li>
<li>News</li>
<li>About</li>
<li>Contact</li>
</ul>
<img src = "IMAGES/welcome_pic.jpg" alt="#" id = "welcome-plane">
<div class = "inside-pic">
<span id = "fly">FLY WITH DS <br/> AIRLINES</span>
<h3>Flights from or towards Athens ! Fly secure and comfortable with us! </h3>
<button id = "book">Book flight</button>
</div>
</div>
</div>
Thank you in advance.

Answer 1

You can use below code in your css (made image as background of div)
.welcome-pic{
background-image: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url("IMAGES/welcome_pic.jpg") no-repeat center;
background-size: cover;
}
Make sure you remove img tag from your html.
You can adjust rgba values (alpha values) to specify brightness level.

Answer 2

It looks like you have a z-index layering issue. Use this css:
.welcome-pic{
z-index:0;
}
.square-container {
z-index: 1;
}
.welcome-pic ul {
z-index: 1;
}
Here is the codepen: https://codepen.io/ladywebhawk/pen/NWNPNzN