Html + CSS - header & text - html

Question

I'm new to html/CSS starting a few weeks ago and I decided work on my first template for my little gaming network and got a issue. The problem is I have a ideal header but when I do CSS for text over a header nothing shows up and the header is covering the text no matter what I do.
This how I would like have it + white text over it .
#header .h-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
background-image: url('https://i.imgur.com/OW0YQWa.png');
background-position: center;
background-size: cover;
max-height: 300px;
}
.h-bg:before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
display: block;
background-color: rgba(0, 0, 0, 0.5);
}

Answer 1

Assuming you're trying to achieve a dark transparent bar that overlaps a background, you were close. You were setting the height to 100% in more than one way.
However, this is probably not the best way to go about it.
#header .h-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
background-image: url('https://i.imgur.com/OW0YQWa.png');
background-position: center;
background-size: cover;
max-height: 300px;
}
.h-bg:before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
height: 40px;
width: 100%;
display: block;
background-color: rgba(0, 0, 0, 0.5);
}
<div id="header">
<div class="h-bg">
</div>
</div>
If you need the dark transparent bar to be the navigation, you shouldn't use pseudo elements for it. Instead, a set of div elements is all you need.
#header {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
background-image: url('https://i.imgur.com/OW0YQWa.png');
background-position: center;
background-size: cover;
max-height: 300px;
}
.h-bg{
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
width: 100%;
display: block;
background-color: rgba(0, 0, 0, 0.5);
color: white;
}
.h-bg ul{list-style: none;}
.h-bg ul li{display: inline-block; padding: 0 10px;}
<div id="header">
<div class="h-bg">
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>