title: Changing my banner background image transparency with bootstrap 4
body: <p>I'm trying to make my background image transparent without making anything else inside it (navigation menu, main text) transparent too. </p>
  
  <p>I googled it of course and found the best way was to overlay with a white image exactly the same size as the original image.</p>
  
  <p>That's what I've tried to do but I'm not sure why all my elements are also becoming transparent.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;html&gt;
  
    &lt;div class="container-fluid"&gt;
  
  &lt;div class="banner-img"&gt;
      &lt;ul class="nav nav-pills"&gt;
    &lt;li class="nav-item"&gt;
      &lt;a class="nav-link active" href="#"&gt;Kintesh&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="nav-item"&gt;
      &lt;a class="nav-link" href="#"&gt;CV&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="nav-item"&gt;
      &lt;a class="nav-link" href="#"&gt;Portfolio&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="nav-item"&gt;
      &lt;a class="nav-link disabled" href="#"&gt;Contact&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  
  
          &lt;div class="col-xs-2 logo text-center"&gt;&lt;span class="welcome-text-bold"&gt;K&lt;/span&gt;intesh &lt;span class="welcome-text-bold"&gt;P&lt;/span&gt;atel&lt;/div&gt;
      &lt;/div&gt;
  
        &lt;div class="blurb"&gt;
      Some interesting stuff goes here, I guess?
    &lt;/div&gt;
  
    &lt;/div&gt; &lt;!-- End of container-fluid --&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>/* 
  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;
  }
  </code></pre>