How can I make the background image transparent without affecting other elements like the navigation menu and main text?
After researching online, I discovered that overlaying with a white image of the same size could be the solution.
However, when attempting to implement this method, all elements on the page seem to become transparent. Any idea why this is happening?
HTML:
<html>
<div class="container-fluid">
<div class="banner-img">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Kintesh</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CV</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Contact</a>
</li>
</ul>
<div class="col-xs-2 logo text-center"><span class="welcome-text-bold">K</span>intesh <span class="welcome-text-bold">P</span>atel</div>
</div>
<div class="blurb">
Some interesting stuff goes here, I guess?
</div>
</div> <!-- End of container-fluid -->
</html>
CSS:
/*
Dark Grey: #A9A9A9;
Light white: #8C8D8D;
Watermelon for vibrancy: #FC0B56;
Light grey for reasons: #8C8D8D;
Orange: #e37222;
Blue: #CAEBF2;
Canary wharf img url: https://image.ibb.co/kZ0n0Q/boris_stefanik_119208.jpg
*/
/*
font-family: 'Ubuntu', sans-serif;
font-family: 'Lobster', cursive;
font-family: 'Pacifico', cursive;
font-family: 'Asap', sans-serif;
*/
@import url('https://fonts.googleapis.com/css?family=Asap|Lobster|Pacifico|Ubuntu');
body, html {
background-color: #fff;
height: 100%;
}
body {
padding-top: 0px;
}
.banner-img {
position: relative;
background: #fff;
overflow: hidden;
}
.banner-img:before {
content: ' ';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.5;
background-repeat: no-repeat;
background-position: 0% 50%;
-ms-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
background-image:url('https://image.ibb.co/kZ0n0Q/boris_stefanik_119208.jpg');
}
.content {
position:absolute;
width:100%;
top:100%;
height: 100px;
}
.container-fluid {
padding: 0px;
background-color: #fff;
}
.welcome-text-bold {
color: #FC0B56;
}
.logo {
color: #efefef;
font-weight: 800;
font-size: 5em;
padding: 5%;
text-align: center;
/* font-family: 'Pacifico', cursive; */
font-family: 'Asap', sans-serif;
text-align: center;
}